gpt4 book ai didi

javascript - D3 值键的匹配方式是否与使用 enter() 时默认索引号的匹配方式相同?

转载 作者:行者123 更新时间:2023-11-30 12:24:57 24 4
gpt4 key购买 nike

我正在运行一些 D3.js 代码 ( a great explanation of keys, by index and by value ),然后遇到一个关于使用值作为键的问题。在以下代码片段中,我使用索引作为 selection.data() 函数中的键:

<body>
<div id="example2">
<p>Already existing paragraph 1</p>
<p>Already existing paragraph 2</p>
</div>
<script type="text/javascript">
pdata = [10,12,6,8,15];

selectDIV = d3.select("#example2");

selectDIV.selectAll("p")
.data(pdata)
.enter()
.append("p")
.text(function(d){return d;});
</script>
</body>

然后,输出将是

Already existing paragraph 1

Already existing paragraph 2

6

8

15

这是有道理的,因为我们已经得到 2 <p>现存数组中的元素,并且因为我们使用元素索引作为键,所以只会添加索引号不是已经存在的元素。

为了了解键的工作原理,我尝试了一个使用元素值而不是元素索引号的键函数:

<body>
<div id="example3">
<p>1</p>
<p>Already existing paragraph 2</p>
</div>
<script type="text/javascript">
pdata = [1,"Already existing paragraph 2",6,8,15,15];

selectDIV = d3.select("#example3");

selectDIV.selectAll("p")
.data(pdata, function(d){return d;})
.enter()
.append("p")
.text(function(d){return d;});
</script>
</body>

在这种情况下,输出恰好是

1

Already existing paragraph 2

1

Already existing paragraph 2

6

8

15

15

所以,如果我使用值作为键,为什么 <p> 中的值标签匹配 <p>我指定的数组中的标记值,这些值被写入了两次?我会认为已经创建的 <p> 数组中都存在字符串“Already existing paragraph 2”标签是否意味着任何具有相同值的元素都不会重复出现?

或者,情况真的是这样吗,我是不是太像 JS n00b 了,以至于没有意识到 D3 将它们视为不同的值?

如果只是匹配数组索引号来过滤 enter() 选择的情况,我很难确定在使用值作为键时何时会出现重叠。

最佳答案

在您的第二个示例中,您使用绑定(bind)到元素的数据作为键 (d),不是分配给它的文本值 -- 这两个只是碰巧是一样的。没有数据绑定(bind)到现有的两个元素,因此没有匹配项,所有内容都在 enter() 选择中结束。

要达到您要的效果,您需要在执行代码之前将数据“绑定(bind)”到现有元素:

d3.selectAll("p").each(function() { this.__data__ = d3.select(this).text(); })

关于javascript - D3 值键的匹配方式是否与使用 enter() 时默认索引号的匹配方式相同?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29736630/

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