为什么会跳过第一个链接项目？ [英] Why is the first Link item being skipped?

问题描述

我有一个相当简单的可视化，我想把它放在一起，但处理有一个小问题。

I've got a fairly simple visualization I'm trying to put together, but having a slight issue with the processing.

如果我使用下面的代码段一切正常工作：

If I use the following snippet then everything works as expected:

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

如果我改用一个稍微不同的，使用路径：

If I switch this however to use a slightly different one, using paths:

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 这里。

Then for some reason the first 'link' is missing. Can anyone suggest why this might be? There's a JSFiddle here. The effect that expected is missing, is that I don't have nice rounded lines like I want.

推荐答案

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

The problem is that D3 matches your selection .selectAll("path") to your data by index by default and there is already a path in the SVG (in the defs). That is, the first data element matches the first path in the SVG, which is already there. Therefore, it is not in the .enter() selection.

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

The way to fix this is to specify a function in the optional second argument of .data() to tell D3 how to match elements, e.g.

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

这篇关于为什么会跳过第一个链接项目？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！