D3.v4图形在重新渲染时冻结

时间:2016-09-08 09:49:44

标签: d3.js

我将我的D3.v3代码移植到最新的D3.v4。在数据更改后,我曾经多次调用我的渲染模拟功能(附加节点,附加链接等)。

现在,如果我再次调用我的渲染功能图形冻结,它不会调整新节点或链接,拖动也不会工作。

以下是jsfiddle中的代码

https://jsfiddle.net/za0xpdc5/4/

Graph.prototype.render = function() {
  this.simulation = d3.forceSimulation()
    .force("link", d3.forceLink().id(function(d) {
      return d.id;
    }))
    .force("charge", d3.forceManyBody())
    .force("center", d3.forceCenter(200, 200)); 

  link = this.linksG
    .selectAll("line")
    .data(this.links)
    .enter()
    .append("line")
    .attr("id", function(d) {
      return d.id
    });
  node = this.nodesG
    .selectAll("g")
    .data(this.nodes)
    .enter()
    .append("g")
    .attr("id", function(d) {return d.id;})
    .append("circle")
    .attr("id", function(d) {return "node_" + d.id})
    .attr("r", 5)
    .call(d3.drag()
          .on("start", dragstarted)
          .on("drag", dragged)
          .on("end", dragended));

  # ==================================== 
  # <---- It appears the freeze occurs at this point
  #       during the 2nd execution  of graph.render()
  # ==================================== 

  this.simulation.nodes(this.nodes).on("tick", this.tick);
  this.simulation.force("link").links(this.links);
}

0 个答案:

没有答案