首先;我知道有类似的问题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 函数中出现了未定义
。
我错过了什么?
最佳答案
在 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,因为它可能(我不知道你的数据)记录一个对象数组,而不是与鼠标在线上的位置相对应的单个值,这这似乎是您所期望的。
关于javascript - 折线图中未定义 D3-tip,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40109891/