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

Question

在我的block (更新)这里我添加了一个d3.bisector来获取悬停时的所有y值，我现在想知道是否有更好的方法来获取所有值，而无需将新的文本元素附加到每个值的 focus 变量，然后在 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 ------------^

并说“这出于某种原因有效”。解释很简单，您已经有一个带有 city 类的元素:

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

因此，当您这样做时:

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

您正在将第一个数据对象绑定(bind)到您从未使用过的组。因此，只需更改这些类名，然后执行 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 位置:按照它们现在的方式，您无法知道每个标签代表哪一行。