javascript - 在鼠标悬停和双工具提示上链接两个元素

Question

我正在寻找一些关于如何让可视化中的两个元素(通过公共(public)数据值链接)同时响应的建议。

这是现在的可视化效果。 http://bl.ocks.org/natemiller/2686e5c0d9a1a4bb0895

请注意，不同颜色的点代表 2005 年(绿色)和 2013 年(蓝色)的美国 50 个州，因此每个州都有一个蓝色点和一个绿色点。我有两件事想在这里工作。

1. 我希望能够将鼠标悬停在蓝点或绿点上，并突出显示相应的点(针对同一状态)。
2. 我希望在两个点旁边显示包含一些基本数据的工具提示，提供点的特定数据。

关于上面的第一点。现在，当您将鼠标悬停在蓝色点上时，相应的绿色点会突出显示，但是，当您将鼠标悬停在绿色点上时，只有该点突出显示，而不是其相应的蓝色点突出显示。我想这是一个简单的修复，但对于我来说，我无法弄清楚如何反转引用，所以我也得到了绿色到蓝色的引用。

关于第二点。现在，包含相关信息的工具提示出现在鼠标悬停点附近，但我希望在交替年份数据的相应点旁边出现类似的工具提示，以便更容易进行跨年份的直接比较。我对添加 HTML 工具提示还很陌生，所以我不清楚如何执行此操作，并怀疑可能需要一种新方法来添加工具提示。有什么帮助可以引导我走向正确的方向，了解如何在鼠标悬停的元素和相应的链接元素附近显示工具提示吗？

Answer 1

1) 请记住，id 是唯一的，并且您要使用相同的 id 创建多个圈子，请改用类

circles.attr("class", function(d) { return d.state })

2) 您正在创建一个工具提示，如果您想为每对状态显示一个工具提示，请创建多个工具提示

假设您进行了这些更改，您可以轻松地为每对状态创建多个工具提示

circles.on('mouseover', function (d) {
  // selection for 2 states
  var states = d3.selectAll('circle.' + d.state)
  // code to style those nodes goes here ...

  // tooltips for the states
  var tooltips = d3.select('svg').selectAll('text.tooltip')
    .data(states.data())

  // initial styling of the tooltips goes here...
  tooltips
    .enter()
    .append('text')
    .attr('class', 'tooltip')

  // update
  tooltips
    .html(function (d) {
      // text of the tooltip
      return 'something'
    })
    // positioning, it requires some margin fixes I guess
    .attr('x', function (d) { return xScale(d.child_pov) })
    .attr('y', function (d) { return yScale(d.non_math_prof) })
})

最后删除触发 mouseout 事件时在鼠标悬停时创建的工具提示

circles.on('mouseout', function (d) {
  d3.select('svg').selectAll('text.tooltip').remove()
})