【发布时间】：2014-12-30 07:14:03
【问题描述】：
我正在使用 D3.js 在地图上绘制大量小数据点（如圆圈）。没什么大不了的。但是，我想添加缩放和平移的功能。
我一直在用这个版本的缩放功能：http://bl.ocks.org/mbostock/2206340
它在我的地图库（例如国家表格）上效果很好。但它不会移动数据点。 （我试图简单地将数据添加到“特征”层，但这效果不佳 - 它将它们放在地形下方并使其不再触发鼠标悬停事件，大概是因为它们位于寻找平移的层之下/缩放事件。）
这是我的地图的样子：
如果我在平移/缩放时什么都不做，显然看起来不太好：
我尝试使用缩放/平移事件来调整投影，然后重新投影数据点。这非常适合平移，但完全无法缩放：
您无法从上面的图像中真正看出，但图像之间的相对距离确实随着缩放而移动。但是平移翻译完全关闭。
这是我用来处理缩放的函数：
function zoomed() {
features.attr("transform", "translate(" + d3.event.translate + ")scale(" + d3.event.scale + ")");
features.select(".state-border").style("stroke-width", 1.5 / d3.event.scale + "px");
features.select(".county-border").style("stroke-width", .5 / d3.event.scale + "px");
projection.scale(projection_scale*d3.event.scale);
projection.translate([((width/2)+d3.event.translate[0]),((height/2)+d3.event.translate[1])]);
for(i in cdata) {
var ll = cdata[i].LatLng.split(",");
if(!ll[0]) ll[0]=-500;
if(!ll[1]) ll[1]=-500;
positions[cdata[i].id]=(projection([parseFloat(ll[1]),parseFloat(ll[0])]));
}
svg.selectAll(".data_circle")
.attr("cx", function(d, i) { return positions[d.id][0]; })
.attr("cy", function(d, i) { return positions[d.id][1]; })
;
}
cdata 是一个对象，其中包含我所有的 csv 加载数据，包括 lat/lng 数据作为逗号分隔的字符串（因此拆分）。 -500 仅用于不良数据；它把它放在你看不到的地方（临时修复）。 position 是所有投影的 lat/lng 位置的数组。
显然，我想错了。我已经尝试通过缩放量（例如 ((width/2)+d3.event.translate[0])*d3.event.scale) ）缩放翻译功能，但这也会产生非常奇怪的结果（似乎有点帮助，但平移/缩放变得有点“精神错乱” - 就好像这些点在 3D 空间中悬停在地图上方，左右移动使它们看起来有点立体......无论如何，不是我试图产生的效果）。
我应该做些什么不同的事情？同样，任何解决方案都需要考虑到点上有需要能够触发的鼠标悬停事件。
我在缩放 D3 示例中搜索了可以执行此操作的示例，但没有找到，这让我感到惊讶，因为这似乎是一种基本功能（并且在 Google 地图中很容易做到一次），但也许我搜索的不够深入，也没有找到正确的地方。
【问题讨论】：
标签： d3.js