D3-tip undefined в линейной диаграмме

Question

Прежде всего; Я знаю, что есть похожие вопросы here или there, но ни одна из них не решила мою проблему.

My D3-Tip не отображается на моей линейной карте. (Он работает на карте)

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); 

Ничего не показано, и я получил undefined внутри моей HTML функции.

Что мне не хватает?

Answer 1

В D3 первый аргумент (традиционно названный d) относится к привязке данных. Итак, когда вы пишете console.log(d), вы ожидаете увидеть данные, привязанные к этому элементу. Но в вашем случае у вас их нет!

A (частичное) решение меняется следующим образом:

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: Я написал частичную, потому что это, вероятно, (я не знаю ваших данных) log массив объектов, а не одно значение, соответствующее положению мыши над линией, и это то, что вы ожидаете.