【问题标题】:d3.js voronoi with overlapping data points具有重叠数据点的 d3.js voronoi
【发布时间】:2015-03-04 22:06:47
【问题描述】:

我正在将数以万计的圆映射到一个 d3.js 图表,具有不同的半径。这是一个屏幕截图(数据子集,可以过滤):

有一个覆盖 voronoi 图,用于在用户滚动每个圆圈时显示自定义弹出窗口(带有一些细节)。 voronoi 点(“位置”)具有指定为小数的随机数,以防止重叠完全相同的数据点的问题。这是 voronoi 重叠的屏幕截图:

但是,弹出工具提示仅在将鼠标悬停在某些数据点上时才会显示,而在其他数据点上不显示。

我正在使用 d3.js,v2(不是 v3),代码位于 https://github.com/shaunjacobsen/divvy_savestime,到目前为止,我的进度在 http://sjacobsen.com/testing/2015/bubble-chart.html 可见。 (在 jsfiddle 中追加大型 json 数据集很困难)。

对于如何在鼠标悬停时使弹出窗口出现在 每个 圆圈上,您有什么建议或指导吗?非常感谢。

编辑:我应该注意到这是基于http://ta.virot.me.s3-website-us-east-1.amazonaws.com/hubway/hubway-summary.html

【问题讨论】:

  • 看来mouseover事件按预期触发了,只是部分节点报错:Uncaught TypeError: Cannot read property 'route' of undefined。它在抱怨var busRouteID = busRoute["route"]; 这条线。要么是您找到 busRoute 的方式存在错误,要么是您的数据中不存在某些路线。
  • @meetamit 我觉得自己像个傻瓜!我目前正在重写整个数据部分,因为它不是查找路线的有效方法。它现在可以工作了(我仍然需要努力让它悬停在数据点附近,而不是在底部)。谢谢!

标签: javascript d3.js voronoi


【解决方案1】:

AFAIK 您使用 voronoi 图来显示工具提示?一种更好的方法是加权 voronoi,其中圆的区域均等化。

【讨论】:

  • 这在 d3 中可行吗? (感谢您的评论)。
  • @latortue09:距离是从加权voronoi中的半径中减去的。
  • @shaunjacobsen 有一个功能请求到add weighted voronoi to d3
猜你喜欢
  • 1970-01-01
  • 2015-08-19
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2015-09-24
相关资源
最近更新 更多