了解d3.js强制布局的更新过程

时间:2016-01-18 09:36:24

标签: javascript d3.js

为了安静一点时间,我现在尝试更新我的d3.js力布局图。可悲的是,我能找到的每一个提示都会导致this example。我不完全理解它,现在对这个过程的不同部分有疑问。

<script>var paramOne =<c:out value="${all}"/></script>

假设setTimeout(function() { var a = {id: "a"}, b = {id: "b"}, c = {id: "c"}; nodes.push(a, b, c); links.push({source: a, target: b}, {source: a, target: c}, {source: b, target: c}); start(); }, 0); 函数仅用于提供某些操作,并且在几秒之间发生:

问题1:我可以基本删除setTimeout并将其写为setTimeout()吗?
问题2:function initializeGraph(){/*do stuff*/}nodes.push()只会将这些元素推送到links.push()&amp; node数组但尚未对图表进行任何更改?

3 个答案:

答案 0 :(得分:2)

1)是问题1你可以这样做

工作代码here

2)D3意味着数据驱动文档。因此,当您更改数据时,DOM会更新。 因此,您更新保存节点数据的nodes的原因。 节点(var node = svg.selectAll(".node"),)持有node相关DOM。

答案 1 :(得分:1)

Q1。你可以,但它不会在设定的时间发生,你链接到的例子被设置为对数据进行3次更改,因此布局以3秒的间隔进行,这样很明显发生在观看演示的人身上发生的事情< / p>

考虑通过超时功能或任何重命名来初始化d3布局可能是错误的。力图声明是我头脑中的初始化。再次在完整示例中,更新/启动函数获取数据并将其绑定到dom元素,无论是第一次运行还是第100次它是相同的代码,只是在第一种情况下数据连接将生成新元素只能通过.enter()限定符。

Q2。 我发现d3起初很难,因为它使用相同/接近的名称来表达不同的东西。

在链接到的完整示例中,nodes是一个传递给单独的force.nodes()函数的数组,node是连接到force.nodes()时生成的dom元素的选择(force。 nodes()可能会返回首先提到的节点数组

发生此数据连接的启动函数发生更改,并根据需要添加/更新/删除dom元素。

答案 2 :(得分:0)

1:是的,超时不必存在,您可以将其附加到按钮单击。

2:是的,它们只被推送到那些数组,只有在调用update时才会更新布局,即用新数据运行强制图的初始化。我刚刚谈到这个可能有助于你理解的问题:

https://stackoverflow.com/users/3382204/cyril