Question

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

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

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

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

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

关于第二点。现在，带有相关信息的工具提示出现在moused-over点附近，但我希望在备用年份数据的相应点旁边显示类似的工具提示，这样可以更容易地直接比较多年。我对添加HTML工具提示很陌生，因此我不清楚如何执行此操作并怀疑它可能需要一种新方法来添加工具提示。是否有任何帮助可以指导我如何在moused-over元素和相应的链接元素附近出现工具提示？

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

Answer 2

您不能拥有多个具有相同ID的元素。使用课程.circleHawaii代替#circleHawaii。

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

2 个答案: