CODEWITHSUNDEEP
javascriptd3.js
Weedoze
Weedoze

Reputation: 13953

D3-tip undefined in line chart

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 ?

Upvotes: 0

Views: 558

Answers (1)

Gerardo Furtado
Gerardo Furtado

Reputation: 102218

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.

Upvotes: 1

Related Questions