9

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

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

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

4

1 回答 1

13

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

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

.data(data.links, function(d, i) { return d + i; })
于 2013-05-14T13:51:38.600 回答