3

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

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) + ")");
})

这一直让我发疯，所以任何帮助将不胜感激。

4

1 回答 1

5

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

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

投影中心（[位置]）

如果指定了中心，则将投影的中心设置为指定位置，以度为单位的经度和纬度的二元素数组并返回投影。如果未指定中心，则返回当前中心，默认为⟨0°,0°⟩。

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

投影.翻译（[点]）

如果指定了点，则将投影的平移偏移量设置为指定的二元素数组 [x, y] 并返回投影。如果未指定点，则返回当前平移偏移量，默认为 [480, 250]。平移偏移确定投影中心的像素坐标。默认平移偏移将 ⟨0°,0°⟩ 放置在 960×500 区域的中心。

秘诀是知道某些方法在制图空间上运行，而另一些则在画布上运行。

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

例如，给定一个投影和路径：

var projection = d3.geo.mercator()
    .scale(1);

var path = d3.geo.path()
    .projection(projection);

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

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

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

b = d3.geo.bounds(feature);

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

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

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

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

现在，您应该将地图中心的要素放大 5% 的边距。

于 2013-06-12T06:07:06.037 回答