在arbor.js(查询插件)中为边缘添加标签

Add label to edges in arbor.js (Query plugin)

本文关键字：边缘 添加 加标签 插件 arbor js 查询      更新时间：2023-09-26

如何在arbor.js中为边缘添加标签这是一个图形可视化库。

假设A和B是节点，E是边一种简单的方法是插入一个"文本节点"T并将A-T和T-B连接起来

但是我不想这样，还有别的办法吗?

下面是示例代码 
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相连。如何向边缘提供标签?

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

在Renderer中重写方法:

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);
    });       
   };

此代码期望在初始化时填充每条边的data属性。

我手动创建所有的节点和边使用我的自定义地图和方法addNode/adddge，但我想你可以改变一点你的代码初始化边与自定义数据:

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"}}
           }
  }
}

注:请看这个例子，我从中学到了很多。

edge.data是{length:.8, data:{name:"A->B"}}，因此将方法particleSystem.eachEdge()的最后一行替换为以下代码

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

相关文章：