Question

我在这里有一个codepen - 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");

Answer 1

应该通过选择不同的图表（或其他一些独特的标记）并在同一范围内给出唯一的变量名来单独创建工具提示：

set.seed(1) #For the earlier data creation

rows <- (data$pos==1 & data$ID=="a") | (data$pos==3 & data$ID=="c")
data[rows, "y"] <- rescale(data[rows,"diff"], c(1,10))

data
#  ID   count_1    count_2        diff pos        y
#1  a 0.2655087 0.06178627  0.20372239   1  2.20415
#2  a 0.3721239 0.20597457  0.16614932   1  1.00000
#3  b 0.5728534 0.17655675  0.39629661   1       NA
#4  b 0.9082078 0.68702285  0.22118494   2       NA
#5  c 0.2016819 0.38410372 -0.18242179   2       NA
#6  c 0.8983897 0.76984142  0.12854826   2       NA
#7  c 0.9446753 0.49769924  0.44697603   3 10.00000
#8  d 0.6607978 0.71761851 -0.05682072   3       NA
#9  d 0.6291140 0.99190609 -0.36279205   3       NA

let tooltip1 = d3.select('.chart1').append("div")
    .attr("class", "tip")
    .style("display", "none")
    .attr("fill", "grey");

https://codepen.io/mortonanalytics/pen/BYpwaz

Answer 2

您的代码中存在大量不必要的重复。

仅创建工具提示div 一次。此外，由于您在D3代码中创建 div，因此您不需要在HTML中使用tooltip类的任何div。删除两者。

除此之外，使用d3.event.pageX和d3.event.pageY将工具提示div放在页面的任何位置。单个工具提示div可用于向该页面上的任意数量的SVG显示工具提示。

以下是您更新的CodePen：https://codepen.io/anon/pen/KQaBvE?editors=0010

D3 - 选择此svg中的元素？

2 个答案: