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

あなたは何をしようとしているのですか？個人的には、ループと d3.js を混在させるのは悪い形だと考えています。d3 データ バインディングは通常、ループよりも優れた方法です。

質問に戻ると、nodeGroup を svg に置き換えると、基本的にループlistNodes.length時間を繰り返します (listEdges.length ではなく listNodes.length x listEdges.length の実行)。

たぶん、あなたがやろうとしていることについて詳しく説明する必要がありますか？

于 2013-06-20T19:44:28.500 に答える