返回Selected的D3键

Return D3 key of Selected

本文关键字：D3 Selected 返回      更新时间：2023-09-26

我知道我可以使用d3.keys()返回对象内部的所有键，但我想返回鼠标悬停事件内部的选定项键。

我瞄准了D3中的元素，比如：

var test = something.selectAll('rect')
    .data(myData['groupSelection'])
    .enter()
    .append('rect')
    .on('mouseover', function (d) {
        console.log(d3.keys(d));
    }

这将返回给定的选择键，但是，当我真的需要对这些项键进行计数时，例如，如果我选择了从数据中创建的第二个rect，它返回2会很好。

D3中所有将数据作为参数的回调也将数据的索引作为参数。也就是说，代替

.attr("foo", function(d) { ... });

你也可以写

.attr("foo", function(d, i) { ... });

其中d是数据，i是传递给.data()的数据数组中d的索引。.style()、.on()等也是如此。

例如，假设您有数据[2,3]以及绑定了数据1和2的元素。现在，如果你这样做了（注意.data()的关键功能，根据元素的内容匹配元素）

var sel = d3.selectAll("element").data([2,3], function(d) { return d; });

您将获得非空的enter（包含3）、update（包含2）和exit（包含1绑定到的元素）选择。您可以对每个选项进行操作，例如

sel.attr("foo", function(d, i) { ... });

i是指选择中的索引。每个选择只包含一个元素，因此i的值为0——对于每个选择。也就是说，代码

sel.attr("foo", function(d, i) { console.log(i); });
sel.enter().attr("foo", function(d, i) { console.log(i); });
sel.exit().attr("foo", function(d, i) { console.log(i); });

将0登录到控制台三次。例如，如果更新选择的长度为3（也就是说，.data()的参数中的三个元素与选择中的DOM元素匹配），则在控制台上会得到0、1、2。

相关文章：