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

Answer 1

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

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

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

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

1 个答案: