0

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

1 回答 1

0

What are you trying to do? Personally I consider it bad form to mix loops with d3.js; the d3 data binding is usually a better way to do things than loops.

Back to your question, when you replace nodeGroup with svg, you essentially repeat the loop listNodes.length times (listNodes.length x listEdges.length executions instead of listEdges.length).

Maybe you should elaborate on what you're trying to do?

于 2013-06-20T19:44:28.500 回答