如何在强制导向图中禁用动画？

Question

有没有办法在D3强制导向图中禁用动画？

我正在使用这个例子:https://bl.ocks.org/mbostock/4062045

我想在没有初始动画的情况下渲染图形,即显示其最终位置中的所有节点和链接.

Answer 1

尽管这个问题已经有了接受的答案,但是提出的解决方案并不是在D3力图中禁用动画的正确方法.浏览器仍在每个刻度线移动节点和链接!你只是看不到它们在移动,但浏览器正在移动它们,进行大量计算并浪费大量时间/资源.此外,您不需要服务器端.

我的回答提出了一个不同的解决方案,实际上并没有绘制动画.例如,您可以在Mike Bostock(D3创建者)的代码中看到它.

当您了解什么是tick函数时,这个解决方案很容易理解:它只是一个计算模拟中所有位置并前进一步的函数.尽管绝大多数D3力导向图在每个刻度处绘制节点和链接,但您不需要这样做.

这是你可以做的:

1. 使用stop()后立即停止模拟:

   var simulation = d3.forceSimulation(graph.nodes)
       .force("link", d3.forceLink().id(function(d) { return d.id; }))
       .force("charge", d3.forceManyBody())
       .force("center", d3.forceCenter(width / 2, height / 2))
       .stop();//stop the simulation here
   

2. 使模拟运行时不绘制任何东西.这是最重要的一步:您不必在每个刻度处移动元素.在这里,我正在运行300个刻度,这大约是默认数字:

   for (var i = 0; i < 300; ++i) simulation.tick();
   

3. 然后,只需使用由模拟(创建属性x,y,source,target)绘制圆圈和线条,只有一次:

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

以下是仅包含这些更改的链接块:http://bl.ocks.org/anonymous/8a4e4e2fed281ea5e2a5c804a9a03783/85ced3ea82a4bed20a2010530562b655d8f6e464

比较此解决方案的时间与"隐藏节点"解决方案的时间(接受的答案).这里的这个更快.在我的测试中,我得到了这个结果:

• "隐藏节点"解决方案:大约5000ms
• 这个解决方案:大约200ms

也就是说,快了25倍.

PS:为简单起见,我删除ticked了分叉块中的函数.如果要拖动节点,只需将其添加回来.

编辑D3 v5.8

现在,D3 v5.8允许将交互次数传递给simulation.tick()您,甚至for不再需要循环.所以,而不是:

for (var i = 0; i < 300; ++i) simulation.tick();

你可以这样做:

simulation.tick(300);

Answer 2

编辑

此方法只是隐藏模拟的动画部分。请参阅Gerardo Furtado 的答案，该答案执行模拟而不绘制中间结果，这意味着用户不必等待解决方案缓慢发展。

========

“动画”实际上是模拟运行。可以调整模拟运行的时间，但这可能意味着节点会陷入局部最小值 -请参阅此处的文档以获取更多详细信息。

您可以选择向 end模拟完成时触发的事件添加侦听器。我创建了一个片段，其中图表最初是隐藏的，然后在完成模拟后出现。

另一种方法是在服务器端渲染图表（如果这是一个选项），然后提供一个现成的 SVG，可以使用 d3 对其进行进一步操作。

var svg = d3.select("svg"),
  width = +svg.attr("width"),
  height = +svg.attr("height");

var color = d3.scaleOrdinal(d3.schemeCategory20);

var simulation = d3.forceSimulation()
  .force("link", d3.forceLink().id(function(d) {
    return d.id;
  }))
  .force("charge", d3.forceManyBody())
  .force("center", d3.forceCenter(width / 2, height / 2))
  .on('end', function() {
    svg.classed('hidden', false)
    d3.select('#loading').remove()
  });

// I wasn't able to get the snippet to load the original data from https://bl.ocks.org/mbostock/raw/4062045/miserables.json so this is a copy hosted on glitch
d3.json("https://cdn.glitch.com/8e57a936-9a34-4e95-a03d-598e5738f44d%2Fmiserables.json", function(error, graph) {
  if (error) {
    console.log(error)
  };

  var link = svg.append("g")
    .attr("class", "links")
    .selectAll("line")
    .data(graph.links)
    .enter().append("line")
    .attr("stroke-width", function(d) {
      return Math.sqrt(d.value);
    });

  var node = svg.append("g")
    .attr("class", "nodes")
    .selectAll("circle")
    .data(graph.nodes)
    .enter().append("circle")
    .attr("r", 5)
    .attr("fill", function(d) {
      return color(d.group);
    })
    .call(d3.drag()
      .on("start", dragstarted)
      .on("drag", dragged)
      .on("end", dragended));

  node.append("title")
    .text(function(d) {
      return d.id;
    });

  simulation
    .nodes(graph.nodes)
    .on("tick", ticked);

  simulation.force("link")
    .links(graph.links);

  function ticked() {
    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;
      });

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

function dragstarted(d) {
  if (!d3.event.active) simulation.alphaTarget(0.3).restart();
  d.fx = d.x;
  d.fy = d.y;
}

function dragged(d) {
  d.fx = d3.event.x;
  d.fy = d3.event.y;
}

function dragended(d) {
  if (!d3.event.active) simulation.alphaTarget(0);
  d.fx = null;
  d.fy = null;
}

.links line {
  stroke: #999;
  stroke-opacity: 0.6;
}

.nodes circle {
  stroke: #fff;
  stroke-width: 1.5px;
}

.hidden {
  visibility: hidden
}

img {
    display: block;
    margin-left: auto;
    margin-right: auto;
   }

<script src="https://d3js.org/d3.v4.min.js"></script>
<img id ="loading" src="http://thinkfuture.com/wp-content/uploads/2013/10/loading_spinner.gif" />
<svg width="960" height="600" class="hidden"></svg>