有没有办法在 D3 力导向图中禁用动画？
我正在处理这个例子：https ://bl.ocks.org/mbostock/4062045
我想在没有初始动画的情况下渲染图形，即显示所有节点和链接的最终位置。
问问题
7713 次
2 回答
35
尽管这个问题已经有了一个公认的答案，但建议的解决方案并不是在 D3 力图中禁用动画的正确方法。浏览器仍在移动节点和链接在每个滴答声！您只是看不到它们移动，但浏览器正在移动它们，进行大量计算并浪费大量时间/资源。此外，您不需要服务器端。
我的回答提出了一个不同的解决方案，它实际上不绘制动画。例如，您可以在 Mike Bostock（D3 创建者）的这段代码中看到它。
tick当您了解什么是函数时，这个解决方案很容易理解：它只是一个计算模拟中所有位置并前进一步的函数。尽管绝大多数 D3 力导向图在每个刻度处绘制节点和链接，但您不需要这样做。
这是您可以执行的操作：
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让模拟运行而不绘制任何东西。这是最重要的一步：您不必在每个刻度上移动元素。在这里，我正在运行 300 个滴答声，这大约是默认数字：
for (var i = 0; i < 300; ++i) simulation.tick();然后，只需使用模拟创建的属性 (
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
比较这个解决方案的时间与“隐藏节点”解决方案的时间（接受的答案）。这里的这个速度更快。在我的测试中，我得到了这个结果：
- “隐藏节点”解决方案：大约 5000 毫秒
- 此解决方案：大约 200 毫秒
也就是说，快了 25 倍。
PS：为简单起见，我删除ticked了分叉块中的功能。如果要拖动节点，只需将其添加回来。
为 D3 v5.8 编辑
现在 D3 v5.8 允许将交互次数传递给simulation.tick()您，甚至for不再需要循环。所以，而不是：
for (var i = 0; i < 300; ++i) simulation.tick();
你可以这样做：
simulation.tick(300);
于 2017-11-28T00:28:41.660 回答
3
编辑
这种方法只是隐藏了模拟的动画部分。请参阅Gerardo Furtado 的答案，该答案在不绘制中间结果的情况下执行模拟，这意味着用户无需等待解决方案缓慢发展。
========
“动画”实际上是模拟运行。可以使用模拟运行的时间，但这可能意味着节点卡在局部最小值 -有关详细信息，请参阅此处的文档。
您确实可以选择为 end模拟完成时触发的事件添加侦听器。我创建了一个片段，其中 Graph 最初是隐藏的，然后在完成模拟后出现。
另一种方法是在服务器端渲染图表（如果这是一个选项），然后提供一个现成的 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>于 2017-11-27T13:58:46.230 回答