javascript - d3 在鼠标悬停时过滤数据后从选择中提取值

Question

对于这个奇怪的标题，我深表歉意，描述我的问题并不容易，希望其他需要解决相同问题的人能在这里找到答案。我在 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)有没有更好/更干净的方法来实现我想要做的事情？

预先感谢您的宝贵时间!

Answer 1

关于(1)，您可以使用.each为选择中的每个数据运行一次函数:

    d3.selectAll('.marker')
      .filter(...)
      .each(function(d) { myv.push(d.name); });

<小时/>

要在工具提示中显示名称，您需要进行单独的选择，然后使用 myv 数组作为数据集。

tooltip.selectAll(".name")
  .data(myv)
  // do stuff