Question

我正在使用d3.js强制定向布局实现有向图可视化。请参阅：http://bl.ocks.org/d3noob/5155181

我的问题是我正在尝试获取指向节点的路径，但我不知道如何开始。

另外，我首先无法理解箭头的连接方式：

   // build the arrow.
   svg.append("svg:defs").selectAll("marker")
    .data(["end"])      // Different link/path types can be defined here
  .enter().append("svg:marker")    // This section adds in the arrows
    .attr("id", String)
    .attr("viewBox", "0 -5 10 10")
    .attr("refX", 15)
    .attr("refY", -1.5)
    .attr("markerWidth", 6)
    .attr("markerHeight", 6)
    .attr("orient", "auto")
  .append("svg:path")
    .attr("d", "M0,-5L10,0L0,5");

   // add the links and the arrows
   var path = svg.append("svg:g").selectAll("path")
    .data(force.links())
  .enter().append("svg:path")
    .attr("class", function(d) { return "link " + d.type; })
    .attr("marker-end", "url(#end)");

任何指针都会非常感激！

Answer 1

标记附在此行：

.attr("marker-end", "url(#end)");

这就是说路径末端的标记（即它指向的节点）应该用ID“end”定义的标记进行修饰 - defs部分中的箭头。 / p>

要查找指向节点的边，this question应该会有所帮助。我们的想法是迭代所有链接并检查它们是否与当前节点相关联，在您的情况下是否是目标节点。这个代码看起来像这样（作为鼠标悬停处理程序）。

node.on("mouseover", function(d) {
  var pointing = links.filter(function(e) { return e.target == d; });
});

如何找到指向特定节点的边？

1 个答案: