Question

在我的block （已更新）中，我添加了d3.bisector来获取悬停时的所有y值，我现在想知道的是如果有更好的方法来获取所有值，而无需为每个值的focus变量添加新的文本元素，稍后在mouseover函数中全部选择它们。

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

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

Answer 1

在提出你的问题之前：你写了......

city

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

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

并说“这可以出于某种原因”。解释很简单，你已经有了一个带有var city = g.selectAll(".city") .data(cities);类的元素：

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]) });，它只是一个包含三个字符串的数组，而不是y，这是一个充满数据的大数组。

然后：

{{1}}

以下是您更改的bl.ocks：fetch_assoc

另外，请考虑更改每个标签的{{1}}位置：它们现在的方式您无法知道每个标签代表哪条线。

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

1 个答案: