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

Question

我有一个相当简单的可视化,我试图把它放在一起,但处理有一个小问题.

如果我使用以下代码段,那么一切都按预期工作:

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 这里.预期缺失的效果是,我没有像我想要的那样漂亮的圆形线条.

Answer 1

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

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

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