D3js强制定向图动画和重新加载问题

Question

下面的代码生成一个强制有向图，但有几个问题。

1. 就像我怎么控制开场动画速度
2. 如何更改拖动速度
3. 而重大的问题每次我试图拖动它会自动重新加载一些元素的时间。

我不知道我在做什么错。

var width = $(window).width(), 
     height = 700; 

var force = d3.layout.force() 
     .size([width, height]) 
     .on("tick", tick2); 




var svg = d3.select("body .banner").append("svg") 
     .attr("width", width) 
     .attr("height", height); 
//.on("click", explicitlyPosition); 

var link = svg.selectAll(".link"), 
     node = svg.selectAll(".node"); 

function tick2() { 
    link 
      .attr("x1", function (d) { 
       return width * 0.5; 
      }) 
      .attr("y1", function (d) { 
       return height * 0.5; 
      }) 
      .attr("x2", function (d) { 
       return width * 0.5; 
      }) 
      .attr("y2", function (d) { 
       return height * 0.5; 
      }); 

    d3.selectAll("circle") 
      .attr("cx", function (d) { 
       return width * 0.5; 
      }) 
      .attr("cy", function (d) { 
       return height * 0.5; 
      }); 

    d3.selectAll("text") 
      .attr("x", function (d) { 
       return width * 0.5; 
      }) 
      .attr("y", function (d) { 
       return height * 0.5; 
      }); 
    tick(); 
} 
function tick() { 
    link.transition() 
      .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; 
      }); 

    d3.selectAll("circle").transition() 
      .attr("cx", function (d) { 
       return d.x; 
      }) 
      .attr("cy", function (d) { 
       return d.y; 
      }); 

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

var graph = { 
    "nodes": [ 
     {"name": "You", "val": "You", "x": width * 0.50, "y": height * 0.5, "fixed": false}, 
     {"name": "SaaS", "val": 768, "x": width * 0.40, "y": height * 0.14, "fixed": true}, 
     {"name": "Education", "val": 1021, "x": width * 0.65, "y": height * 0.10, "fixed": true}, 
     {"name": "E-Commerce", "val": 1345, "x": width * 0.75, "y": height * 0.35, "fixed": true}, 
     {"name": "Food Tech", "val": 512, "x": width * 0.70, "y": height * 0.72, "fixed": true}, 
     {"name": "Healthcare", "val": 246, "x": width * 0.57, "y": height * 0.70, "fixed": true}, 
     {"name": "Fashion Industry", "val": 657, "x": width * 0.30, "y": height * 0.80, "fixed": true}, 
     {"name": "Hardware", "val": 145, "x": width * 0.30, "y": height * 0.65, "fixed": true}, 
     {"name": "Fintech", "val": 1160, "x": width * 0.25, "y": height * 0.18, "fixed": true}, 
     {"name": "Series A", "val": 392, "x": width * 0.85, "y": height * 0.13, "fixed": true}, 
     {"name": "Series B", "val": 873, "x": width * 0.80, "y": height * 0.60, "fixed": true}, 
     {"name": "2014", "val": 592, "x": width * 0.125, "y": height * 0.25, "fixed": true}, 
     {"name": "2015", "val": 630, "x": width * 0.19, "y": height * 0.45, "fixed": true} 
    ], 
    "links": [ 
     {"source": 0, "target": 1}, 
     {"source": 0, "target": 2}, 
     {"source": 0, "target": 3}, 
     {"source": 3, "target": 9}, 
     {"source": 3, "target": 10}, 
     {"source": 0, "target": 4}, 
     {"source": 0, "target": 5}, 
     {"source": 0, "target": 6}, 
     {"source": 0, "target": 7}, 
     {"source": 0, "target": 8}, 
     {"source": 8, "target": 11}, 
     {"source": 8, "target": 12} 
    ] 
}; 




link = link.data(graph.links) 
     .enter().append("line") 
     .attr("class", "link"); 

node = node.data(graph.nodes) 
     .enter().append("g") 
     .call(force.drag); 

node.append("circle") 
     .attr("class", "node") 
     .attr("r", function (d) { 
      you_val = (d.val === "You") ? 1500 : d.val; 
      return ((you_val)/30) < 15 ? 15 : ((you_val)/30); 
     }); 

node.append("text") 
     .attr("x", 0) 
     .attr("dy", ".35em") 
     .attr("text-anchor", "middle") 
     .attr("fill", "#9a9a9a") 
     .attr("font-size", "12px") 
     .attr("font-weight", "600") 
     .text(function (d) { 
      return d.val; 
     }); 

node.append("text") 
     .attr("x", 0) 
     .attr("dy", function (d) { 
      you_val = (d.val === "You") ? 1500 : d.val; 
      var rad = ((you_val)/30) < 15 ? 15 : ((you_val)/30); 
      return (rad + 15) + "px"; 
     }) 
     .attr("text-anchor", "middle") 
     .attr("fill", "#9a9a9a") 
     .attr("font-size", "12px") 
     .text(function (d) { 
      return d.name; 
     }); 

force 
     .nodes(graph.nodes) 
     .links(graph.links) 
     .start(); 

Answer 1

我不明白你为什么有两个滴答功能。

1. 如何更改拖动速度
2. 而重大的问题每次我试图拖动它会自动重新加载一些元素的时间。

只要有一个刻度功能是这样的：

function tick2() { 
    link 
      .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; 
      }); 

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

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

你的情况，你有两个刻度功能，这两者有一个非常不同的逻辑。

3）像我怎么控制

您指定的节点为固定x和y

就像开场动画速度：{"name": "You", "val": "You", "x": width * 0.50, "y": height * 0.5, "fixed": true}

在这种情况下，力布局不计算x和y，因为你已经说过它是一个固定节点，这意味着它不能通过强制布局移动。

如果您想布局有载入动画，计算出自己的地方阅读这真棒tutorial

工作代码here