与大多数人一样,我正在努力使用D3的数据连接机制。我已经阅读了关于这个主题的所有文章,好的和(大多数)不好。 Christian Behrens'guest-and-chair party analogy可能是最好的,虽然我警告读者,他忽略了我们大约2/3,从“现在我们的更新()函数执行两组不同的行动” - 他没有澄清在这里,显然,DOM构造(追加/删除)调用被更新选择特别忽略,而属性调用由所有三种选择类型处理,尽管都在一个方法链中无缝地出现。 (就他而言,Mike Bostock在解释数据连接和方法链时的几项努力范围从温和屈尊到完全复杂的事情。)
我仍然有一个问题,理解data()和enter()之间的膜,特别是何时保存变量以及给定链中的调用如何操作哪些对象,以及我的变量保存哪个链返回值,以及如何我应该知道(显然,attr不会影响变量,但是在包含一系列选择,数据和输入的链中会被返回?);因此,我对Behrens的优秀论文进行了温和的批评,因为它在那里有很多承诺。
下面,我有一个强制布局(可能是任何布局),在启动时显示两个节点,如果单击任何节点,则应添加第三个节点。
"./bulbs.in"
我跟随Behrens做了一个更新()函数以节省开支。设置cx和cy最初工作正常,但在单击节点时则不行。新节点保持在[0,0]。我认为我在管理参数和返回update()方面一定存在问题。一个更好的方法,实际上有效吗?
答案 0 :(得分:1)
你只是错过了两件小事。首先,您需要重新启动强制布局,以便更新节点位置,并且需要更新node
处理函数中使用的tick
:
node.on("click", function(d) {
graph.nodes.push({ "name":"3" });
node = update();
force.start();
});
完整演示here。
答案 1 :(得分:0)
我最后通过一些实验来解决这个问题;它似乎与我需要在update()函数中放入force.on(“tick”...)和node.on(“click”)函数这一事实有关。如果我没有那里的tick处理器,它就不会为新节点创建一个转换,这似乎符合我所看到的。另外,我必须在更新后再次调用force.start()。我将在下一次机会发布工作代码:它现在在离线笔记本电脑上。