为什么第一个链接项被跳过? [英] 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屋！