Question

我一直试图让我的力导向图变得更快/更顺畅，而且似乎从“tick”函数中评论这部分就可以了。当然，它也会使所有边缘消失，尽管节点仍然一起移动，就好像被不可见的线程连接一样。

我在网络图中有大约2-3个节点，当设置每个元素的不透明度时，我也检查它的重量，如果它是1，我将其删除。我对所有节点和文本标签重复此操作。（和使用d.target.weight的边缘）

是否只是一些节点压缩了一切？将元素删除到20左右之后为什么还是那么慢？我是否真的不得不将我的删除权交给.style（“不透明”，函数（d）{//做东西，返回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元素有用的情况下绘制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();

Answer 1

我认为问题在于删除元素仍然不会影响在这种情况下由数百个节点组成的实际数据集。

更改代码以从数据集中删除元素并使用exit（）。remove（）使其更快。

D3.js：如何使力导向图更快

1 个答案: