为了安静一点时间,我现在尝试更新我的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
数组但尚未对图表进行任何更改?
答案 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时才会更新布局,即用新数据运行强制图的初始化。我刚刚谈到这个可能有助于你理解的问题: