如何使用D3更新多列数据?

时间:2012-08-15 04:50:53

标签: d3.js enter

我想在D3中做一些与这个家伙试图做的非常相似的事情:

Can enter() selection be reused after append/insert?

我有多个(行和列)数据,对于每个数据,我需要将它绑定到多个元素。我上面链接的问题的答案解释了如何使用输入选择,但使用更新选择呢?

基本上,我需要知道如何设置更新选择中的属性以及知道哪个数据当前具有其属性集等等。我无法在任何地方找到示例或文档。< / p>

谢谢,

  • 安德鲁



编辑:好吧,我通常让它正常工作。但是,仍然存在一个基本问题:即使我传入“数据”函数调用的数据数组正确,传递给“更新”选择的值仍然是不正确

我调试了一下,我想我知道发生了什么:在退出选择中删除了错误的数据。我该如何解决这个问题 - 换句话说,我如何确保删除旧数据并在新的“数据”函数调用中重复的数据保持不变?

为了澄清一下,让我们说这是我传入的数据(到“数据”函数调用):

1,2,3 4,5,6

然后让我说我下次传入这个:

4,5,6

由于某种原因,这是结果数据:

1,2,3

等。我怎么能解决这个问题,或者这不应该发生,只是因为我做错了什么才发生?

另外,如果有帮助,如果我选择所有“g”元素并在调用“数据”函数之前将其删除:

svg.selectAll("g").remove();

svg.selectAll("g").data(data);

然后我没有遇到这个问题。显然,这不是一个优雅的解决方案。

谢谢,

  • 安德鲁

1 个答案:

答案 0 :(得分:3)

继续关联的问题的示例代码,您需要重新选择添加的行:

var g = svg.selectAll(".foo")
    .data([123, 456]);

var gEnter = g.enter().append("g")
    .attr("class", "foo");

gEnter.append("line"); // line1
gEnter.append("line"); // line2

var line = g.selectAll("line"); // line1 and line2

(如果要分别修改line1或line2,请为它们分配单独的类或标识属性。)

从概念上讲,父G元素作为数据连接的结果具有输入,更新和退出选择。如果将子元素附加到输入G,则需要重新选择它们以创建子项的合并输入+更新选择。