我正在寻找一些关于如何让可视化中的两个元素(通过公共(public)数据值链接)同时响应的建议。
这是现在的可视化效果。 http://bl.ocks.org/natemiller/2686e5c0d9a1a4bb0895
请注意,不同颜色的点代表 2005 年(绿色)和 2013 年(蓝色)的美国 50 个州,因此每个州都有一个蓝色点和一个绿色点。我有两件事想在这里工作。
- 我希望能够将鼠标悬停在蓝点或绿点上,并突出显示相应的点(针对同一状态)。
- 我希望在两个点旁边显示包含一些基本数据的工具提示,提供点的特定数据。
关于上面的第一点。现在,当您将鼠标悬停在蓝色点上时,相应的绿色点会突出显示,但是,当您将鼠标悬停在绿色点上时,只有该点突出显示,而不是其相应的蓝色点突出显示。我想这是一个简单的修复,但对于我来说,我无法弄清楚如何反转引用,所以我也得到了绿色到蓝色的引用。
关于第二点。现在,包含相关信息的工具提示出现在鼠标悬停点附近,但我希望在交替年份数据的相应点旁边出现类似的工具提示,以便更容易进行跨年份的直接比较。我对添加 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()
})
关于javascript - 在鼠标悬停和双工具提示上链接两个元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32704696/