D3.js：如何使力更有力的圖更快

我一直在試圖讓我的力量指示圖走得更快/更順暢，而且似乎將這部分註釋掉了「打勾」函數。當然，它也會使所有的邊緣消失，儘管節點仍然一起移動，就像通過不可見線程連接一樣。D3.js：如何使力更有力的圖更快

我在網絡圖圖中有大約2-3百個節點，當設置每個元素的不透明度時，我也檢查它的重量，如果它是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();

來源

2013-07-02 user2483724

您還可以使用[linkStength]（https://github.com/mbostock/d3/wiki/Force-Layout#wiki-linkStrength）或[alpha]（https://github.com/mbostock/ d3/wiki/Force-Layout＃wiki-alpha）的值更快地收斂。 –

雖然這更多是一個整體感覺遲鈍的問題。（雖然這個迭代在收斂之前會在很長一段時間內搖尾曲） – user2483724

我相信問題是移除一個元素仍然不會影響正在使用的實際數據集構成在這種情況下有數百個節點。

更改代碼以從數據集中刪除元素並使用exit（）。remove（）使其更快。

來源

2013-07-03 14:39:24 user2483724

D3.js：如何使力更有力的圖更快

回答

相關問題