在多线图表 d3js 中悬停时获取所有 y 值的更好方法

Question

在我的 block （更新） 中，我添加了一个 d3.bisector 来获取悬停时的所有 y 值，我现在想知道的是是否有更好的方法来获取所有值，而不必将新文本元素附加到每个值的 focus 变量，然后 select 它们都在 mouseover 函数中。

我认为将 .data(cities) 添加到 focus 变量，然后以某种方式引用 .text(function(d) {return d.values}) 中的数据是一个很好的方法。

我走在正确的轨道上还是有更有效的方法？

Answer 1

在解决您的问题之前：您写道...

let keys = data.columns.slice(1, 5); // This works for some reason...

...对于您知道的片段应该是：

let keys = data.columns.slice(1, 4);
//just 3 cities here ------------^

并说"This works for some reason"。解释很简单，你已经有一个带有 class city:

的元素

g.append("g").attr("class", "city");

因此，当您这样做时：

var city = g.selectAll(".city")
    .data(cities);

您正在将第一个数据对象绑定到一个您从未使用过的组。所以，只需更改那些 class 名称，然后执行 slice(1, 4)，这是正确的。

回到你的问题：

是的，您可以使用输入选择大大简化该代码：

var labels = focus.selectAll(null)
    .data(copy)
    .enter()
    .append("text")
    .attr("class", "lineHoverText")
    .attr("font-size", 11)
    .attr("x", 10)
    .attr("dy", function(_, i) {
        return 1 + i * 2 + "em"
    });

如您所见，我使用的是 copy，它只是一个包含三个字符串的数组，而不是 cities，它是一个充满数据的大数组。

然后：

labels.attr("transform", "translate(" + (x(d.date) + 10) + "," + height / 2.5 + ")")
    .text(function(e) {
        return e + " " + formatMetric(d[e + METRIC])
    });

这是您的 bl.ocks 所做的更改：https://bl.ocks.org/anonymous/dc6abcbd29a6496090467fbcf230e760/9ed42bcbc73276b41b7e66abfbc111b1bf09c72a

此外，考虑更改每个标签的 y 位置：它们现在的样子你无法知道每个标签代表哪一行。

在多线图表 d3js 中悬停时获取所有 y 值的更好方法

A better way to get all y values on hover in a multiline chart d3js

javascript

dry

d3.js