D3 -在这个svg中选择元素？
D3 -在这个svg中选择元素？
提问于 2018-02-08 15:43:47
我这里有个密码员- https://codepen.io/anon/pen/yvgJKB
我有两个不同数据的d3图表。
我希望在条形图上有工具提示，所以当你滚动它们时，它会显示这个值。
我希望工具提示在svg中是单独的html，因为实际的图表是响应的，我不希望工具提示与svg一起缩放。
工具提示的工作方式与顶部图表中所期望的一样。
在底部图表中，工具提示出现在顶部图表中。
我认为这是因为let tooltip = d3.select('.tooltip').append("div")正在选择第一个工具提示，这是在第一个图表中。
图表和工具提示是动态创建的。
在D3中有一种方式可以在svg中表示d3.select('.tooltip')，类似于d3.select(this)('.tooltip')
let tooltip = d3.select('.tooltip').append("div")
.attr("class", "tip")
.style("display", "none")
.attr("fill", "grey");回答 2
Stack Overflow用户
回答已采纳
发布于 2018-02-09 01:01:32
代码中有很多不必要的重复。
只创建一次一次的工具提示div。另外，由于您是在D3代码中创建div，所以您不需要在tooltip类中使用任何div。把这两样都移走。
此外，使用d3.event.pageX和d3.event.pageY将您的工具提示div定位到页面的任何位置。可以使用单个工具提示div将工具提示显示给页面上的任意数量的SVG。
以下是您更新的CodePen：https://codepen.io/anon/pen/KQaBvE?editors=0010
Stack Overflow用户
发布于 2018-02-08 19:18:45
通过选择不同的图表(或其他一些唯一的标记)并在同一范围内给出唯一的变量名，可以单独创建工具提示：
let tooltip1 = d3.select('.chart1').append("div")
.attr("class", "tip")
.style("display", "none")
.attr("fill", "grey");let tooltip2 = d3.select('.chart2').append("div")
.attr("class", "tip")
.style("display", "none")
.attr("fill", "grey");页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/48689386
复制相关文章
相似问题
腾讯云开发者
