2

我一直在努力让我的力导向图变得更快/更顺畅，似乎从“tick”函数中注释这部分就可以了。当然，它也使所有的边都消失了，尽管节点仍然一起移动，就像被看不见的线附着一样。

我在网络图中有大约 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 回答