Question

我有一个组选择传递给我使用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)");

 }

这是我的nodeGroup声明的方式

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

以及如何声明svg

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

Answer 1

你想做什么？我个人认为将循环与d3.js混合是不好的形式; d3数据绑定通常是比循环更好的方法。

回到你的问题，当你用svg替换nodeGroup时，你基本上重复循环listNodes.length次（listNodes.length x listEdges.length执行而不是listEdges.length）。

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

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

1 个答案: