缓和力布局的初始滴答声 [英] Calm down initial tick of a force layout

问题描述

我刚刚开始接触 d3，发现学习曲线非常陡峭.这个过程和我习惯的完全不同，数学大部分都超出了我的头脑.

无论如何，我的项目包含一个代表系统之间集成地图的力布局.这部分效果非常好，但我确实有一个主要问题，这也体现在 Michael Bostocks 网站上的力导向布局演示中:当节点被启动时，它们似乎是在画布之外渲染的.在此之后，一些严肃的物理数学开始接管，模拟引力使节点在相当混乱的路径上来回发送，直到它们平静下来并固定在一些随机坐标上.尽管第一次运行演示时这些动作很酷，但是当您试图从公司管理员的角度查看网络接口的状态时，服务器不会保持静止，一段时间后就会变得很烦人.

我确信我为这个项目设置了正确的布局，因为我确实希望服务器自动布局，我确实希望将它们之间的链接可视化.然而，我对引力效应持矛盾态度.

我想知道；是否可以手动设置每个节点的初始位置，以便我可以将它们放置在更靠近重心的位置并稍微缩短弹跳时间"?

解决方案

以上所有答案都误解了 Øystein Amundsen 的问题.

在力开始时稳定力的唯一方法是将 node.x 和 node.y 设置为适当的值.请注意，节点是d3.js的数据，而不是代表的DOM类型.

例如，如果您加载

nodes = [{"id": a}, {"id": b}, {"id": c}]

进入

d3.layout.force().nodes(nodes)

您必须设置节点数组中所有元素的所有 .x 和 .y它会是这样的(在 coffeescript 中)

nodes = [{"id": a}, {"id": b}, {"id": c}]对于 [0..2] 中的 inodes[i].x = 500 #节点的初始x位置nodes[i].y = 300 #节点的初始y位置d3.layout.force().nodes(nodes).links(links)

那么节点将从 force.start() 时的位置开始.这样可以避免混乱.

I've just started dabbling with d3, and find the learning curve quite steep. The process is completely different than what I am used to, and the mathematics are mostly way over my head.

Anyway, my project consists of a force layout representing map of integrations between systems. This part works out awesomely well, but I do have one major concern, which is also represented in the force directed layout demo on Michael Bostocks site: When nodes are initiated, they seem to be rendered off canvas. After this, some serious physics math is taking over, simulating a gravitational pull which sends the nodes on a rather confusing path back and forth until they calm down and settle on some random coordinates. Although these movements are ripping cool the first time the demo is run, when you are trying to view the status of network interfaces from a company it admins point of view and the servers just wont stay still, it gets tiresome after a while.

I am sure I have the correct layout setup for this project, because I do want the servers to autolayout, I do want to visualize links between them. I am however ambivalent in regards to the gravitation effect.

I wonder; is it possible to set the initial position of each node manually, so that I can put them closer to the gravitational center and shorten the "bounce time" a bit?

解决方案

All the answers above misunderstood Øystein Amundsen's question.

The only way to stabilize the force upon it starts is to set node.x and node.y a proper value. Please note that the node is the data of d3.js, not the represented DOM type.

For example, if you load

nodes = [{"id": a}, {"id": b}, {"id": c}]

into

d3.layout.force().nodes(nodes)

you have to set all .x and .y of all elements in array of nodes it will be like this ( in coffeescript )

nodes = [{"id": a}, {"id": b}, {"id": c}]
for i in [0..2]
  nodes[i].x = 500 #the initial x position of node
  nodes[i].y = 300 #the initial y position of node
d3.layout.force().nodes(nodes).links(links)

then the nodes will start at the position when force.start(). this would avoid the chaos.

这篇关于缓和力布局的初始滴答声的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！