Question

首先;我知道有类似的问题here或there，但没有一个问题解决了我的问题。

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

没有显示任何内容，我在html函数中获得了undefined。

我错过了什么？

Answer 1

在D3中，第一个参数（传统上称为d）指的是数据绑定。因此，当您编写console.log(d)时，您希望看到绑定到该元素的数据。但是，在你的情况下，你没有！

（部分）解决方案正在改变这一点：

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 ，因为它可能（我不知道你的数据）记录一个对象数组，而不是一个对应于鼠标在该行上的位置的值，是你似乎期待的。

D3-tip在折线图中未定义

1 个答案: