D3/SVG：为什么更改选择时，此代码会变慢？

我将一个组选择传递给这个函数，我使用thisGroup.append（“path”）.blah.blah调用它，但它的速度非常慢，可能慢了100倍。无法判断，因为有2秒的延迟，但使用如下所示的svg.append几乎是即时的。谁能告诉我为什么？虽然它可以工作，但我必须重复我为小组所做的翻译，这会打乱我的svg元素顺序

for (var i = 0; i < listEdges.length; i++) {

    var lineSeg = [];

    //generate coordinates

    //replace like nodeGroup.append("path") and it become 100 times slower
    svg.append("path")
       .attr("d",line(lineSeg))
       .attr("stroke", chooseHSL(i))
       .style("stroke-opacity", 0.5)
       .attr("stroke-width", 5)
       .attr("fill", "none")
       .attr("transform","translate(580,260)");

 }

svg是如何声明的

var nodeGroup = svg.selectAll("g")
                 .data(listNodes)
                 .enter()
                 .append("g")
                 .attr("id",function(d){ return "Group_" + trimWhitespace(d); })
                 .attr("transform","translate(580,260)");

var svg = d3.select("#container")
        .append("svg")
        .attr("id","svgContainer")

        .attr("viewBox","0 0 1300 610")
        .attr("perserveAspectRatio","xMinYMid")

        .attr("width", w  + margin.left + margin.right)
        .attr("height", h + margin.top  + margin.bottom)
        .append("g")
        .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

---

你想干什么？我个人认为将循环与D3.JS混合是不好的形式；d3数据绑定通常比循环更好

回到您的问题，当您用svg替换节点组时，实际上是重复循环

listNodes.length

次（listNodes.length x listEdges.length执行而不是listEdges.length）

---

也许你应该详细说明你想做什么？

我有一些非常稀疏的数据，我用坐标生成器把它们放在一个圆圈里。回想起来，我应该创建一个新的数据集，附加这些坐标，然后用新数据创建DOM对象。不过我还是继续往下说，所以我必须使用循环。不过我理解你的答案，使用svg我只调用循环listEdges次，但是使用nodeGroup我在循环的每个迭代中循环所有组，因为nodeGroup代表所有组的选择。基于您的评论，使用循环并没有利用D3的最大优势，即数据与DOM元素的实际绑定，并且在任何有循环的地方，都应该有一种方法在没有循环的情况下做同样的事情，对吗？同意您的第一个分析。我发现在进行实际数据绑定之前准备数据集更好，它大大简化了d3代码。您是否有可能返回并修复数据模型？d3本身提供了一系列非常有用的数组转换和转换工具。我可能会用适当的数据连接重写代码。谢谢你的帮助！