为什么第一个链接项目被跳过？

Question

我正在尝试拼凑一个相当简单的可视化，但处理过程中遇到了一点问题。

如果我使用以下 sn-p，那么一切都会按预期工作：

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 here。缺少预期的效果，是我没有像我想要的那样漂亮的圆角线。

Answer 1

问题是 D3 默认通过索引将您的选择 .selectAll("path") 与您的数据相匹配，并且 SVG 中已经有一个路径（在 defs 中）。也就是说，第一个数据元素与 SVG 中的第一个路径匹配，该路径已经存在。因此，它不在.enter() 选择中。

解决这个问题的方法是在.data()的可选第二个参数中指定一个函数来告诉D3如何匹配元素，例如

.data(data.links, function(d, i) { return d + i; })