D3 - 地图上的中心和比例扇区

Question

我遇到了一些似乎无法解决的问题，为了保持简单，我将仅使用一些库存示例来解释我想要做什么。

http://bl.ocks.org/mbostock/5126418——这个基本功能

我想要做的是，当单击地图上的“区域”时，该区域会被隐藏，并且所选区域会在屏幕上居中并展开

我的问题是，每次我尝试此操作时，所选对象都会被推离屏幕。

我确信我做错了什么我是 D3 的新手，并且只使用了几天

.on("click", function(d){
    svg
    .append("g")
    .attr("id", "tract")
    .append("g")
    .attr("id", "wrapper")
    .selectAll("path")
    .data([d])
  .enter()
    .append("path")
    .attr("d", path)
    .attr("id", "tract"),
d3.select("#wrapper")
            .transition()
            .duration(800)
            .ease("cubic-bezier(0.785, 0.135, 0.150, 0.860)")
            .attr("transform", "scale(" + 3 + "), translate(" + (width/2) + ", " + (height/2) + ")");
})

这让我抓狂，因此我们将不胜感激。

Answer 1

我对 d3 也很陌生 - 我会尝试解释我是如何理解它的，但我不确定我是否一切都正确。

\n\n

投影具有中心的概念，以地图单位给出：

\n\n

\n

投影.center([位置])

\n\n

如果指定了 center，则将投影\xe2\x80\x99s 中心设置为指定位置（以度为单位的经度和纬度的二元素数组）并返回投影。如果未指定center，则返回当前中心，默认为\xe2\x9f\xa80\xc2\xb0,0\xc2\xb0\xe2\x9f\xa9。

\n

\n\n

还有平移，即投影中心在屏幕中的位置（以像素为单位）。

\n\n

\n

投影.翻译（[点]）

\n\n

如果指定了point，则将projection\xe2\x80\x99s平移偏移设置为指定的二元素数组[x, y]并返回投影。如果未指定 point，则返回当前平移偏移量，默认为 [480, 250]。平移偏移确定投影\xe2\x80\x99s 中心的像素坐标。默认平移偏移将 \xe2\x9f\xa80\xc2\xb0,0\xc2\xb0\xe2\x9f\xa9 放置在 960\xc3\x97500 区域的中心。

\n

\n\n

秘密在于知道有些方法在制图空间上运行，而另一些则在画布上运行。

\n\n

为了使画布中的某个特征居中，例如将投影中心设置为特征边界框的中心 - 这适用于墨卡托（WGS 84，用于谷歌地图），不确定其他投影。

\n\n

例如，给定投影和路径：

\n\n

var projection = d3.geo.mercator()\n    .scale(1);\n\nvar path = d3.geo.path()\n    .projection(projection);\n

\n\n

boundsfrom 的方法返回以像素为单位path的边界框。使用它来找到正确的比例，将像素大小与地图单位大小进行比较（0.95 为您提供比宽度或高度的最佳拟合多 5% 的边距）：

\n\n

var b = path.bounds(feature),\n    s = 0.95 / Math.max(\n                   (b[1][0]-b[0][0])/width, \n                   (b[1][1]-b[0][1])/height\n               );\n

\n\n

使用该d3.geo.bounds方法以地图单位查找边界框：

\n\n

b = d3.geo.bounds(feature);\n

\n\n

将投影中心设置为边界框的中心：

\n\n

projection.center([(b[1][0]+b[0][0])/2, (b[1][1]+b[0][1])/2]);\n

\n\n

使用该translate方法将地图中心移动到画布中心：

\n\n

projection.translate([width/2, height/2]);\n

\n\n

现在，您应该已经将地图中心的要素以 5% 的边距进行了缩放。

\n