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

【问题标题】：Linking two elements on mouseover and dual tooltips在鼠标悬停和双重工具提示上链接两个元素
【发布时间】：2015-09-21 21:15:41
【问题描述】：

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

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

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

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

关于上面的第一点。现在，当您将鼠标悬停在蓝点上时，相应的绿点会突出显示，但是，当您将鼠标悬停在绿点上时，只会突出显示该点而不是其相应的蓝点。我想这是一个简单的解决方法，但是对于我的生活，我无法弄清楚要反转参考，所以我也得到了绿色到蓝色的参考。

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

【问题讨论】：

标签： javascript d3.js mouseover

【解决方案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 事件时，最终移除 mouseover 时创建的工具提示

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

【讨论】：

谢谢。我实现了它，它看起来不错，但是两个工具提示都为鼠标悬停的元素提供了相同的数据。无论将鼠标悬停在哪个点上，我都希望两个点都有一个工具提示（因为它们要感谢您的代码），但是让每个工具提示都提供特定于点的信息（年份、状态、x、y）。似乎我已经使用“circle.state”的数据来突出显示颜色，然后在“circle.state.year”中使用正确的工具提示数据。这种事情可以做吗？
好吧，数据最初绑定到每个圆圈，所以执行 'circle.{state}' 只是获取一对圆圈的一种方式，它们仍然使用这些数据存储在其中的初始数据您可以将文本设置为您想要的任何内容，如果您传递一个函数，每个圆圈的数据将作为第一个参数提供
看起来不错。谢谢你。这些工具提示只是文本。从这里给他们一个背景的最好方法是什么，以便文本在背景数据点之上清晰可见。
我会使用<g>标签，它有一个<rect>作为背景，<text>标签你已经有了，如果听起来很复杂，你可以使用<div>而不是svg元素，请注意，如果您使用 div 并将它们放在正文而不是 svg 标记中，则您需要对其定位进行更多计算，因为顶部/左侧坐标将是绝对的，无论如何我会选择嵌套的 g 标记我想要的任何东西

【解决方案2】：

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

【讨论】：