Question

我正在使用D3制作一个条形图，它使用一组数字UINT来生成和设置条形的高度。

我有一部分代码在鼠标悬停条形元素时生成工具提示。

dataset[]

d3.select("#tooltip") .style("left", xPosition + "px") .style("top", yPosition + "px") .select("#share-value") .text(d) .select("#month-now") .text(dataset.indexOf(d)); console.log(dataset.indexOf(d));正确显示，这是text(d)的值。但是，我还想在dataset[d]中显示元素d的索引。 dataset正确记录索引，但索引未显示在工具提示中。为什么会这样？

编辑：我也试过

console.log(dataset.indexOf(d))

根据D3 Selections，但它似乎仍未返回当前数据的索引。

Answer 1

我假设你的数据集是一个对象数组。所以你应该使用这样的东西：

//imagine your dataset like this:
var dataset = [{name:"cyril", age: 34}, {name:"Tow", age: 3}]

因此，当您尝试获取索引时，您必须这样做：

dataset.findIndex(function(d){ return "cyril" == d.name})
//this will return 0 and for Tow return 1 and "Bow" will return -1

因此，在您的代码中，它将是这样的：

d3.select("#tooltip")
    .style("left", xPosition + "px")
    .style("top", yPosition + "px")                     
    .select("#share-value")
    .text(d)
    .select("#month-now")
    .text(function(d1){dataset.findIndex(function(d){ return YOUR_CONDITION})});

希望这有帮助！

Answer 2

鼠标悬停监听器的第二个参数将为您提供d。

的索引

.on("mouseover",function(d,i){ //i is the index of d in the dataset
   d3.select("#tooltip")
    .style("left", xPosition + "px")
    .style("top", yPosition + "px")                     
    .select("#share-value")
    .text(d)
    .select("#month-now")
    .text(i);
});

我可以在D3选择中调用indexOf吗？

2 个答案: