1

我想在 D3 中做一些与这个人正在尝试做的非常相似的事情:

追加/插入后可以重用 enter() 选择吗?

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

基本上,我需要知道如何在更新选择中设置属性并知道当前正在设置哪些数据的属性等。我在任何地方都找不到示例或文档。



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

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

澄清一下,假设这是我传入的数据(到“数据”函数调用):

1、2、3
4、5、6

那么假设我下次通过这个:

4、5、6

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

1、2、3

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

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

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

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

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

4

1 回答 1

4

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

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,则需要重新选择它们以创建子元素的合并 enter+update 选择。

于 2012-08-15T05:12:58.673 回答