对于这个奇怪的标题,我深表歉意,描述我的问题并不容易,希望其他需要解决相同问题的人能在这里找到答案。我在 map 上有一些标记;它们的 x、y 位置是由某些设备 ip 提供的 long、lat 产生的,因此某些标记会重叠,因为它们具有精确的 x、y 值。我正在尝试创建一个工具提示,悬停时将显示所有重叠标记的名称。这是我目前所处的位置。
示例数据集:
dataset= [
{long: -75, lat: 43, name: 'name1'},
{long: -75, lat: 43, name: 'name2'}
]
tooltip=d3.select('body').append('div')
markers=d3.selecltAll('.marker').data(dataset).enter().append()
.attr('class', 'marker')
.on('mousemove', (d)->
myv=[]
vals=projection([d.long, d.lat])
d3.selectAll('.marker').filter((d,i) ->
proj = projection([d.long, d.lat])
proj[0] < (vals[0]+5) && proj[0] > (vals[0]-5) && proj[1] < (vals[1]+5) && proj[1] > (vals[1]-5)
).text (d) ->
myv.push(d.name)
)
这是我的问题,
1) 使用文本函数将 d.name 推送到 myv 数据集中,可以工作,但感觉不对。在过去的几个小时里,我一直在尝试以更干净的方式插入这一点,但无法做到。我尝试使用数据 (d) -> myv.push(d.name) ,由于某种原因,它仅在第一次悬停时有效一次。
2) 现在我有了数据集 myv
,如何在工具提示中显示它?
3)有没有更好/更干净的方法来实现我想要做的事情?
预先感谢您的宝贵时间!
最佳答案
关于(1),您可以使用.each
为选择中的每个数据运行一次函数:
d3.selectAll('.marker')
.filter(...)
.each(function(d) { myv.push(d.name); });
<小时/>
要在工具提示中显示名称,您需要进行单独的选择,然后使用 myv
数组作为数据集。
tooltip.selectAll(".name")
.data(myv)
// do stuff
关于javascript - d3 在鼠标悬停时过滤数据后从选择中提取值,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36646822/