9

まとめようとしているかなり単純なビジュアライゼーションがありますが、処理にわずかな問題があります。

次のスニペットを使用すると、すべてが期待どおりに機能します。

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 があります。期待されていた効果は、私が望むような丸みを帯びた線がないことです。

4

1 に答える 1