英文:
D3 force render speed
问题
我遇到了找到d3-force图形渲染速度设置的问题。我所问的不是迭代次数或alpha参数的数量，而是渲染循环本身的速度。我想要实现的是在componentDidUpdate挂钩上对节点进行瞬时或即时渲染。
我的挂钩代码（我认为这是可以自包含回答的，但如果不是，将添加更多上下文）：
componentDidUpdate(prevProps: Readonly<IProps>, prevState: Readonly<IState>, snapshot?: any): void {
const links: Array<Link> = [];
this.props.nodes.forEach((n: any) => {
if (!n.dependsOn) {
return;
}
n.dependsOn.forEach((index: any) => {
links.push({ source: index, target: n.id });
});
})
this.simulation = forceSimulation(this.props.nodes)
.force(
"link",
forceLink()
.id((d: any) => d.id)
.links(links)
.distance(100)
.strength(0.9)
)
.alpha(1)
.alphaMin(0.1)
.force("x", forceX(150).strength(0.5))
.force("charge", forceManyBody().strength(0.01))
.force(
"y",
forceY()
.y(node => {
return this._calcPath(node) * 150 - 50;
})
.strength((node: any) => {
let dependedOn = this._nodeDependedOn(node);
if (!dependedOn || node.dependsOn.length < 1) {
return 3;
}
return 0;
})
)
.force("collide", forceCollide(this.props.radius));
this.simulation.on("tick", () =>
this.setState({
links: links,
nodes: this.state.nodes
})
);
}
英文:
I'm having trouble finding the setting for how fast a d3-force graph renders. What I am asking about is not the number of iterations or alpha parameters, but the speed of the render cycle itself. What I am trying to accomplish is a instantaneous or instantaneous rendering of nodes on the componentDidUpdate hook.
My hook code (I believe this is answerable self-contained, but will add more ctx if not):
componentDidUpdate(prevProps: Readonly<IProps>, prevState: Readonly<IState>, snapshot?: any): void {
const links : Array<Link> = [];
this.props.nodes.forEach((n : any) => {
if (!n.dependsOn) {
return;
}
n.dependsOn.forEach((index : any) => {
links.push({ source: index, target: n.id });
});
})
this.simulation = forceSimulation(this.props.nodes)
.force(
"link",
forceLink()
.id((d : any) => d.id)
.links(links)
.distance(100)
.strength(0.9)
)
.alpha(1)
.alphaMin(0.1)
.force("x", forceX(150).strength(0.5))
.force("charge", forceManyBody().strength(0.01))
.force(
"y",
forceY()
.y(node => {
return this._calcPath(node) * 150 - 50;
})
.strength((node : any) => {
let dependedOn = this._nodeDependedOn(node);
if (!dependedOn || node.dependsOn.length < 1) {
return 3;
}
return 0;
})
)
.force("collide", forceCollide(this.props.radius));
this.simulation.on("tick", () =>
this.setState({
links: links,
nodes: this.state.nodes
})
);
}
答案1
得分: 2
我不认为在模拟运行时有任何tick应用之间的暂停，所以我不认为你可以以你建议的方式加速它。您可以控制的是使用simulation.tick每次渲染的步骤数。如果您立即执行300个步骤，您应该能够立即生成最终的布局。
在此Observable笔记本中的实现产生了以下结果：
英文:
I don't think there's any pause between applications of tick while the simulation is running so I don't think you can speed it up in the way that you suggest. What you can control is the number of steps per render using simulation.tick. If you take 300 steps right away, you should effectively generate the final layout right away.
The implementation in this Observable notebook yields the following result:
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-html -->
<div id="observablehq-viewof-steps_per_tick-39ec7ec3"></div>
<div id="observablehq-animation-39ec7ec3"></div>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@observablehq/inspector@5/dist/inspector.css">
<script type="module">
import {Runtime, Inspector} from "https://cdn.jsdelivr.net/npm/@observablehq/runtime@5/dist/runtime.js";
import define from "https://api.observablehq.com/d/ebe85db08d365106@55.js?v=3";
new Runtime().module(define, name => {
if (name === "viewof steps_per_tick") return new Inspector(document.querySelector("#observablehq-viewof-steps_per_tick-39ec7ec3"));
if (name === "animation") return new Inspector(document.querySelector("#observablehq-animation-39ec7ec3"));
});
</script>
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论