折线图中未定义的D3提示

Question

First of all; I know there are similar questions here or there but none of them solved my problem.

My D3-Tip is not showing on my line chart. (It works on a 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);

Nothing is shown and I got undefined inside my html function.

What am I missing ?

Answer 1

In D3, the first argument (traditionally named d ) refers to the data bound. So, when you write console.log(d) , you expect to see the data bound to that element. But, in your case, you have none!

A (partial) solution is changing this:

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

To this:

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: I wrote partial because it will probably (I don't know your data) log an array of objects, not a single value corresponding to the position of the mouse over the line, which is what you seem to expect.