javascript - 折线图中未定义 D3-tip

Question

首先；我知道有类似的问题here或there但他们都没有解决我的问题。

我的 D3-Tip 未显示在我的折线图上。 (它适用于 map )

JS

var tip = d3.tip()
    .attr('class', 'd3-tip')
    .html(function(d) {
        console.log(d); //undefined
        return "Sale : " + d.sale;
    });

svg.call(tip);

svg.append("path")
    .attr("class", "line")
    .attr("d", line(data))
    .attr("stroke", "black")
    .attr("stroke-width", 2)
    .attr("fill", "none")
    .on("mouseover", tip.show);

没有显示任何内容，并且我的 html 函数中出现了未定义。

我错过了什么？

Answer 1

在 D3 中，第一个参数(传统上称为 d)指的是数据绑定(bind)。因此，当您编写 console.log(d) 时，您希望看到绑定(bind)到该元素的数据。但是，就您而言，您没有!

(部分)解决方案正在改变这一点:

svg.append("path")
    .attr("class", "line")
    .attr("d", line(data))
    .attr("stroke", "black")
    .attr("stroke-width", 2)
    .attr("fill", "none")
    .on("mouseover", tip.show);

对此:

svg.append("path")
    .datum(data)
    .attr("class", "line")
    .attr("d", line)
    .attr("stroke", "black")
    .attr("stroke-width", 2)
    .attr("fill", "none")
    .on('mouseover', tip.show);

PS:我写了partial，因为它可能(我不知道你的数据)记录一个对象数组，而不是与鼠标在线上的位置相对应的单个值，这这似乎是您所期望的。