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

Question

我正在寻找有关如何让可视化中的两个元素（由公共数据值链接）同时响应的建议。

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

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

我希望能够将鼠标悬停在蓝点或绿点上并突出显示相应的点（对于相同的状态）。
我希望在两个点旁边显示一个带有一些基本数据的工具提示，以提供特定于点的数据。

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

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

Answer 1

不能有多个具有相同 ID 的元素。使用 class .circleHawaii 而不是 id #circleHawaii.

Answer 2

1) 请记住，ID 是唯一的，并且您正在创建多个具有相同 ID 的圈子，请改用 class

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()
})

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

Linking two elements on mouseover and dual tooltips

javascript

mouseover

d3.js