gpt4 book ai didi

html - d3 更新选择 : How does d3 decide which existing html elements to capture for its own use?

转载 作者:搜寻专家 更新时间:2023-10-31 22:21:32 25 4
gpt4 key购买 nike

我是 d3 的新手,我需要一些帮助来理解 html 元素的重用。

这是一个 fiddle :http://jsfiddle.net/m1erickson/qmEBE/

我在正文中放置了一个现有的段落元素:

<body>
<p> Old Text.</p>
</body>

然后我定义了一个包含 3 个数字的数据集,并像这样执行 .selectAll(“p”):

var dataset = [10,20,30];

d3.select("body").selectAll("p")
.data(dataset)
.enter()
.append("p")
.text( function(d){ return("#"+d); } ) ;

我明白了:

Old Text.
#20
#30

有两件事困扰着我:

为什么 d3 没有创建新的 p-tag 并显示 #10?

当我查看预先存在的段落元素(“旧文本”)时,d3 已分配 d3 数据属性==10。如果 d3 捕获了这个 p-tag,为什么不用它来显示数据呢?

d3 如何决定将哪些预先存在的网页元素包含在其“更新选择”中?

顺便说一句——到目前为止,在 d3 上:我对首先定义数据并遵循设计的想法感到解放。

[ 编辑:那么我有这个权利吗? ]

基于@meetamit 的信息性回答......

下面在元素中创建一个更新选择

    elements =d3.select(“body”).selectAll(“p”).data(dataset) 

以下导致 d3 创建一个输入选择,其中为 20 和 30 创建了 p 标签。

    elements.enter() .append("p")

问题:

此时更新选择是否已经与输入选择合并?

以下设置所有 3 个 p 标签中的文本,因为它们都在合并的更新选择中。

    elements.text(function(d){return("#"+d);});

问题:

由于 d3 将从网页中捕获现有的 p 标签等,因此通常的做法是使初始 d3.select 指向将托管 d3 结果的容器,如下所示:

    elements = d3.select(“#myD3Div”)    ….

最佳答案

当您调用 data(dataset) 时并且页面上已经有一个元素,d3 决定将该元素与 10 相关联-- 第一个数组元素的数据。那是因为该元素是第 0 个 <p>在页面上,因此它必须与数据集的第 0 个元素相关联。换句话说,它是根据数组中的索引来确定持久性。因此,与值 10 相关联的既有元素和潜在元素均不存在。由 enter() 返回函数,因为它们不被视为新元素,只是替换与现有元素关联的数据。

如果你想让它根据实际数据确定持久性,你必须将第二个参数传递给 data()功能:

data(dataset, function(d, i) { return d; })
// NOTE: "return i;" would have the same effect as not passing in the 2nd param

现在 d3 将比较 d在每种情况下——第 0 个元素为 10,null为您已有的 <p> -- 并决定,因为它们不相等,它需要在 enter() 返回的选择中包含第 0 个元素。 ,这将依次为其附加一个元素。

此时,对于d3而言,应该删除预先存在的元素,它会在exit()中返回它。选择,所以你可以打电话remove()在上面。

或者,根据您的目标,您可以保留 data()按原样调用单参数,并更新其文本——而不是来自 enter()选择,而是来自主要的“更新”选择。 See this jsFiddle .

关于html - d3 更新选择 : How does d3 decide which existing html elements to capture for its own use?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16659536/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com