2

私はフォース指向グラフをより速く/より滑らかにしようと試みてきましたが、「ティック」関数からこの部分をコメントアウトすることでうまくいくようです。もちろん、ノードは目に見えない糸でつながっているかのように一緒に移動しますが、すべてのエッジも消えます。

ネットワークっぽいグラフには約 2 ～ 300 のノードがあり、各要素の不透明度を設定するときに、重みもチェックし、1 の場合は削除します。すべてのノードとテキスト ラベルに対してこれを繰り返します。（およびd.target.weightを使用したエッジ）

すべてを圧迫しているのはノードの数だけですか? 要素を 20 程度まで削除した後、なぜまだ遅いのでしょうか? 削除を .style("opacity", function(d){//do stuff, return 1;}) にピギーバックする必要がありますか?

force.on("tick", function() {

    // edges.attr("x1", function(d) { return d.source.x; })
    //      .attr("y1", function(d) { return d.source.y; })
    //      .attr("x2", function(d) { return d.target.x; })
    //      .attr("y2", function(d) { return d.target.y; })
    //      .style("stroke", function(d){
    //         return d.source.color;
    //      });

    nodes.attr("cx", function(d) { return d.x; })
         .attr("cy", function(d) { return d.y; });

    text.attr("x", function(d) { return d.x; })
        .attr("y", function(d) { return d.y; });

  });

役立つ場合は、svg 要素を描画するための関数:

  //Create edges as lines
  var edges = group.selectAll("line")
    .data(dataset.edges)
    .enter()
    .append("line")
    .style("stroke", function(d,i){
        if (d.target.weight === 1)
           d3.select(this).remove();
        return "#FFFFFF";
    })
    .style("opacity",0.5)
    .style("stroke-width", 2);


  //Create nodes as circles
  var nodes = group.selectAll("circle")
    .data(dataset.nodes)
    .enter()
    .append("circle")
    .style("opacity",0.8)
    .attr("r", function(d,i){
      if (d.weight === 1)
        d3.select(this).remove();
        return nodeScale(d.weight * 2);
    })
    .style("fill", function(d, i) {
      return d.color;        
    })
    .call(force.drag);

  var text = group.selectAll("text")
      .data(dataset.nodes)
      .enter()
      .append("text")
      .attr("fill","black")
      .style("font-size",function(d){
        return d.size;
      })
      .style("text-anchor", "middle")
      .text(function(d){
        return d.name;
      })
      .style("opacity",function(d){
        if (d.weight === 1)
          d3.select(this).remove();
        else
          return 0.8;
     })
      .on("mouseover",function(){
        d3.select(this)
          .style("opacity",1)
          .style("font-size", 25);
      })
      .on("mouseout",function(){
        d3.select(this)
          .style("font-size", function(d) { return d.size; });
      })
      .call(force.drag);

また、開始関数は、私がそれをたくさんいじった後、かなりランダムになりました: (私はまた、レンダリング時に私が遊ぶそれぞれのスライダーを持っています)

var force = d3.layout.force()
             .nodes(dataset.nodes)
             .links(dataset.edges)
             .size([w, h])
             .linkDistance([50])
             .charge([-2000])
             .friction(0.5)
             .gravity(0.5)
             .theta(0.5)
             .start();
4

1 に答える 1

1

問題は、要素を削除しても、この場合は数百のノードで構成される実際に使用されているデータセットには影響しないことだと思います。

データセットから要素を削除するようにコードを変更し、exit().remove() を使用すると、処理が速くなります。

于 2013-07-03T14:39:24.413 に答える