放大和缩小 d3 地图时如何查询数据集？

Posted 2023-03-23

【中文标题】放大和缩小 d3 地图时如何查询数据集？

【英文标题】：How do you query your dataset when you zoom into and out of a d3 map?

【发布时间】：2016-06-18 09:39:00

【问题描述】：

如何为 d3 地图添加交互性？ 我想添加功能以在您放大和缩小 d3 地图时查询我的数据集。是否有回调或其他东西可以让我做到这一点？2.1 我还希望缩放后显示的新数据的过渡相当无缝。

【问题讨论】：

通常您使用与使 html 交互、点击、悬停等相同的事件。

你喜欢这个例子吗？ bl.ocks.org/mbostock/4132797我很确定您可以为“靠近”视口的图块创建自定义加载函数，以便查询您的数据库。

【参考方案1】：

d3.behavior.zoom has 3 event handlers:

1.) zoomstart - 在缩放手势开始时（例如，touchstart）。

2.) 缩放 - 当视图发生变化时（例如，touchmove）。

3.) zoomend - 在当前缩放手势结束时（例如，touchend）。

所以，您的情况似乎适合 zoomend 场景：

var zoom = d3.behavior.zoom()
  .on("zoom", zoomed)
  .on("zoomend", zoomend);

function zoomed() 
  features.attr("transform", "translate(" + d3.event.translate + ")scale(" + d3.event.scale + ")");


function zoomend()
  // query dataset and do awesome stuff!!