d3在鼠标悬停上过滤数据之后从选择中提取值

d3 extracting values from selection after filtering data on mouseover

本文关键字：选择 提取 之后 数据 鼠标 悬停 过滤 d3      更新时间：2023-09-26

我为这个奇怪的标题道歉，描述我的问题并不容易，希望其他需要解决同一问题的人最终会出现在这里。我在地图上有一些记号笔；它们的x，y位置是由一些设备ips提供的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） 使用text函数在myv数据集中推送d.name是可行的，但感觉不对。在过去的几个小时里，我一直在尝试以一种更干净的方式推动它，但无法做到。我尝试使用datum（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
相关文章：