我想将工具提示添加到 this图表。 我指的是this和 this示例
问题是它们在 SVG 中的线上没有唯一的点,它只有路径标签。
svg.selectAll("dot")
.data(data)
.enter().append("circle")
.attr("r", 5)
.attr("cx", function(d) { return x(d.date); })
.attr("cy", function(d) { return y(d.close); })
.on("mouseover", function(d) {
div.transition()
.duration(200)
.style("opacity", .9);
div .html(formatTime(d.date) + "<br/>" + d.close)
.style("left", (d3.event.pageX) + "px")
.style("top", (d3.event.pageY - 28) + "px");
})
.on("mouseout", function(d) {
div.transition()
.duration(500)
.style("opacity", 0);
});
就像上面的代码选择 SVG 上的点一样,但我没有任何特定元素来绑定(bind)工具提示。
任何人都可以帮助我吗,因为我是 d3.js 的新手。
最佳答案
你应该为 y 取 d.value:
.attr("cy", function(d) { return y(d.value); })
现在在鼠标悬停时附加新元素:
.on("mouseover", function(d) {
svg.append("text")
.text(d.value)
.attr('class', 'tooltip').style("font-size","10px")
.attr("x", x(d.date))
.attr("y", y(d.value))
.attr('fill', 'red');
})
.on("mouseout", function(d) {
d3.selectAll('.tooltip').remove();
});
关于javascript - D3.js 点处的折线图工具提示,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40992048/