1

我正在使用 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")

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

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

4

0 回答 0