Question

我正在使用D3中的力布局处理有向无环图。我有标记处理代码：

graph.append("svg:defs").selectAll("marker")
      .data(["end"])
    .enter().append("svg:marker")    
      .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");
. . .
var link = graph.append("svg:g").selectAll("line")
      .data(json.links)
    .enter().append("svg:line")
      .attr("class", "link")
      .attr("marker-end", "url(#end)");

然而，一旦我添加了缩放功能，箭头就不再出现在边缘上。我对该问题的初步印象是，我已经更改了附加的嵌套，以便链接和定义现在附加到 g 元素上，而不是直接附加到 svg 元素上。

相关代码的整个片段如下：

var graphDiv = d3.select("#graph");
var graphBase = graphDiv.append("svg:svg");
. . .
var graph = graphBase.call(zoom.on("zoom", redraw))
    .append("svg:g");
. . .
graph.append("svg:defs").selectAll("marker")
      .data(["end"])
    .enter().append("svg:marker")    
      .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");
. . .
var link = graph.append("svg:g").selectAll("line")
      .data(json.links)
    .enter().append("svg:line")
      .attr("class", "link")
      .attr("marker-end", "url(#end)");

使用此代码，箭头根本不会显示在图表上。当我更改以下行时：

graphBase.append("svg:defs").selectAll("marker")
var link = graphBase.append("svg:g").selectAll("line")

箭头重新出现，但在尝试缩放或平移图形时，边缘和箭头根本不会移动。这是有道理的，因为现在边缘不再是缩放行为的一部分，但是我不确定需要更改什么才能使箭头出现在缩放图中。

我花了一些时间寻找其他可能的来源，但没有找到任何与我当前项目相当复杂或具有许多功能的东西。任何意见，将不胜感激。谢谢。

D3缩放箭头

0 个答案: