まとめようとしているかなり単純なビジュアライゼーションがありますが、処理にわずかな問題があります。
次のスニペットを使用すると、すべてが期待どおりに機能します。
var lines = svg.selectAll("line")
.data(data.links)
.enter()
.append("svg:line")
.attr("x1", function(d) { return findNode(data.nodes, d.source).x;})
.attr("y1", function(d) { return findNode(data.nodes, d.source).y;})
.attr("x2", function(d) { return findNode(data.nodes, d.target).x;})
.attr("y2", function(d) { return findNode(data.nodes, d.target).y;})
.style("stroke", "#838383")
.style("stroke-width", 1)
.style("marker-end", "url(#end-arrow)");
ただし、パスを使用して、これをわずかに異なるものに切り替えると:
var paths = svg.selectAll("path")
.data(data.links)
.enter()
.append("svg:path")
.attr("d", function(d) {
debugger;
var src = findNode(data.nodes, d.source);
var tgt = findNode(data.nodes, d.target);
var xi = d3.interpolateNumber(src.x, tgt.x);
var curvature = 0.8;
return "M" + src.x + "," + src.y
+ "C" + xi(curvature) + "," + src.y
+ " " + xi(1 - curvature) + "," + tgt.y
+ " " + tgt.x + "," + tgt.y;
})
.style("stroke", "#838383")
.attr("fill", "none");
次に、何らかの理由で最初の「リンク」がありません。これがなぜなのか誰にも示唆できますか?ここに JSFiddle があります。期待されていた効果は、私が望むような丸みを帯びた線がないことです。