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

Linking two elements on mouseover and dual tooltips

本文关键字：元素 两个 工具提示 悬停 链接 鼠标      更新时间：2023-09-26

我正在寻找一些关于如何在可视化中获得两个元素的建议，它们由一个共同的数据值链接，同时响应。

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

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

  1. 我想能够鼠标悬停在一个蓝点或绿色点上，并有相应的点(对于相同的状态)突出显示。
  2. 我想要一个工具提示与一些基本数据出现在两个点旁边，提供点特定的数据。

关于上面第一点。现在，当你将鼠标悬停在一个蓝点上时，相应的绿点会被高亮显示，然而，当你将鼠标悬停在一个绿点上时，只有这个点会被高亮显示，而不是它对应的蓝点。我想这是一个简单的修复，但对于我的生活，我不能想出反向引用，所以我得到绿色到蓝色的引用。

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

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

不能有多个具有相同id的元素。使用类.circleHawaii代替id #circleHawaii

相关文章：