javascript - D3 ズーム矢印

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

ただし、ズーム機能を追加すると、矢印がエッジに表示されなくなりました。この問題に対する私の最初の印象は、リンクと定義がsvg要素に直接ではなくg要素に追加されるように、追加のネストを変更したことです。

関連するコードのスニペット全体を以下に示します。

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

矢印は再び表示されますが、グラフをズームまたはパンしようとすると、エッジと矢印がまったく移動しません。エッジがズーム動作の一部ではなくなったため、これは理にかなっていますが、ズーム グラフに矢印を表示するには何を変更する必要があるかわかりません。

他の可能なソースを探すのにしばらく時間を費やしましたが、現在のプロジェクトと同じくらい複雑な、または多くの機能を備えたものは見つかりませんでした. アドバイスをいただければ幸いです。ありがとうございました。