Question

我遇到了一些我似乎无法解决的问题，为了保持这个简单，我只会用一些股票例子来解释我想要做的事情。

http://bl.ocks.org/mbostock/5126418 - 此基本功能

我要做的是当隐藏地图上的“Tract”被隐藏并且所选的Tract在屏幕上居中并展开时

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

我确信我做错了什么我是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的新手 - 会尝试解释我是如何理解的，但我不确定我是否做得对。

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

projection.center（[位置]）

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

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

projection.translate（[点]）

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

秘诀是知道某些方法在制图空间上操作，而其他方法在画布上操作。

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

例如，给定投影和路径：

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

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

来自bounds的{{1}}方法会返回以像素为单位的边界框。使用它来查找正确的比例，将像素的大小与地图单位的大小进行比较（0.95比最适合宽度或高度的比例为5％）：

path

使用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

到目前为止，你应该让地图中心的特征放大5％边距。

D3 - 地图上的中心和比例部门

1 个答案: