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：如何使力更有力的图更快

回答

相关问题