如何使用D3 js在线条图中使用工具提示

Question

问

如何使用D3 js在线条图中使用工具提示

hsc686 发布于 2023-01-19 19:55

我试图在线图中使用工具提示,但我不明白为什么工具提示值不会到来.我想要在渲染线图时,在特定数字中添加圆形符号"o".i意味着添加一些圆形符号.请在下面找到我的脚本

cyon.. 7

我假设您正在使用labratrevenge/d3-tip脚本来获取此处的工具提示

这意味着你需要有元素来附加tip.hide和tip.show回调.

您可以通过向图表添加圆点并将回调附加到这些点来实现此目的:

svg.selectAll(".circle")
     .data(data)
     .enter()
     .append("svg:circle")
     .attr("class", "circle")
     .attr("cx", function (d) {
        return x(d.date);
     })
     .attr("cy", function (d) {
       return y(d.close);
     })
     .attr("r", 5)
     .on('mouseover', tip.show)
     .on('mouseout', tip.hide)

看看它在jsfiddle上的行动.

1 个回答

我假设您正在使用labratrevenge/d3-tip脚本来获取此处的工具提示

这意味着你需要有元素来附加tip.hide和tip.show回调.

您可以通过向图表添加圆点并将回调附加到这些点来实现此目的:

svg.selectAll(".circle")
     .data(data)
     .enter()
     .append("svg:circle")
     .attr("class", "circle")
     .attr("cx", function (d) {
        return x(d.date);
     })
     .attr("cy", function (d) {
       return y(d.close);
     })
     .attr("r", 5)
     .on('mouseover', tip.show)
     .on('mouseout', tip.hide)

看看它在jsfiddle上的行动.

2023-01-19 19:57 回答

林泳_钿

撰写答案