将标签添加到arbor.js中的边（查询插件）

如何在arbor.js中的边添加标签这是一个图形可视化库。将标签添加到arbor.js中的边（查询插件）

假设A和B是节点，E是边一种粗暴的方式将插入一个“文本节点” T 并加入AT和TB

但我不想这样，还有什么另一种方式？

这里的示例代码

var theUI = { 
    nodes:{A:{color:"red", shape:"dot", alpha:1}, 
     B:{color:"#b2b19d", shape:"dot", alpha:1}, 
     C:{color:"#b2b19d", shape:"dot", alpha:1}, 
     D:{color:"#b2b19d", shape:"dot", alpha:1}, 
    }, 
    edges:{ 
     A:{ 
      B:{length:.8}, 
      C:{length:.8}, 
      D:{length:.8} 
      } 
    } 
} 

var sys = arbor.ParticleSystem() 
sys.parameters({stiffness:900, repulsion:2000, gravity:true, dt:0.015}) 
sys.renderer = Renderer("#sitemap") 
sys.graft(theUI)

在此，A被连接到B，C和D. 如何提供标签边缘？

来源

2011-09-21 chinmayv

如果您没有为此添加更多描述，例如代码，尝试过的东西，指向插件的链接，或者*某些*实际上**可以帮助**人们帮助您，那么将会被关闭。 – Incognito

arbor.js允许您编写代码来渲染整个图形。你可以在渲染方法中做任何你想做的事情，包括绘制边缘标题，这些标题可以存储在单独的地图中。

只需重写方法在渲染器进行渲染这样：

redraw:function() 
{ 
    ctx.fillStyle = "white"; 
    ctx.fillRect (0,0, canvas.width, canvas.height); 

    particleSystem.eachEdge (function (edge, pt1, pt2) 
    { 
     ctx.strokeStyle = "rgba(0,0,0, .333)"; 
     ctx.lineWidth = 1; 
     ctx.beginPath(); 
     ctx.moveTo (pt1.x, pt1.y); 
     ctx.lineTo (pt2.x, pt2.y); 
     ctx.stroke(); 

     ctx.fillStyle = "black"; 
     ctx.font = 'italic 13px sans-serif'; 
     ctx.fillText (edge.data.name, (pt1.x + pt2.x)/2, (pt1.y + pt2.y)/2); 

    }); 

    particleSystem.eachNode (function (node, pt) 
    { 
     var w = 10; 
     ctx.fillStyle = "orange"; 
     ctx.fillRect (pt.x-w/2, pt.y-w/2, w,w); 
     ctx.fillStyle = "black"; 
     ctx.font = 'italic 13px sans-serif'; 
     ctx.fillText (node.name, pt.x+8, pt.y+8); 
    });  
    };

每条边的这段代码预期的数据属性来填充，而初始化。

我创建一个使用我的自定义地图和方法ADDNODE/addEdge手动所有节点和边缘，BU我想你可以改变一点你的代码自定义数据这种方式来初始化边：

var theUI = { 
    nodes:{A:{color:"red", shape:"dot", alpha:1}, 
     B:{color:"#b2b19d", shape:"dot", alpha:1}, 
     C:{color:"#b2b19d", shape:"dot", alpha:1}, 
     D:{color:"#b2b19d", shape:"dot", alpha:1}, 
    }, 
    edges:{ 
     A:{ 
      B:{length:.8, data:{name:"A->B"}}, 
      C:{length:.8, data:{name:"A->C"}}, 
      D:{length:.8, data:{name:"A->D"}} 
      } 
    } 
}

PS：拿看看this example，我从中学到了很多。

来源

2011-09-22 05:37:38

谢谢，虽然我没有完全按照这个做，但它确实给了我一个指示如何去做。我使用了gfx obejct（类型为arbor.Graphics）并使用了gfx.text（）函数。 – chinmayv

此代码不起作用。你可以发布gtx.text（）方法或提供更完整的代码示例吗？ – gregm

edge.data是{length:.8, data:{name:"A->B"}}所以用下面的代码

ctx.fillText (edge.data.data.name, (pt1.x + pt2.x)/2, (pt1.y + pt2.y)/2);

这为我工作用替换法particleSystem.eachEdge()的最后一行。

来源

2015-04-16 18:58:08

将标签添加到arbor.js中的边（查询插件）

回答

相关问题