javascript - 如何在 d3.js 中为这张 map 设置高度和宽度

Question

我是新手，我正在使用这张 map 工作。我有一个名为:#statesvg 的 div 容器，我希望 map 适应它的大小。但是这个被剪掉了。

在哪段代码中可以修改 map 的高度和宽度？

非常感谢

http://bl.ocks.org/michellechandra/0b2ce4923dc9b5809922

//I get the actual size of the div
var width = document.getElementById('statesvg').offsetWidth;
var height = document.getElementById('statesvg').offsetWidth;
.
.
.
Same code

Answer 1

除了缩放整个 svg(或它的一部分)之外，您还可以更改投影。无论 svg 大小如何，投影决定了你的特征占据了多少空间。最简单的方法是在 d3v4+ 中使用 projection.fitSize():

projection.fitSize([宽度,高度],特征);

width 和 height 是您的 svg 尺寸，feature 是您的 geojson 特征集合(json 在你的例子，不是 json.features，它需要一个对象，而不是一个数组)。此方法设置投影的比例和平移，以便您的特征居中并针对您的 svg/canvas 适当缩放。

或者，鉴于所有 fitSize 所做的只是设置投影的平移和比例，您可以直接修改这些属性以设置适当的比例和平移。由于您的示例以 [width/2,height/2] 为中心投影，这已经适应提供的尺寸。因此，您需要做的就是设置比例。如果 1000 的比例值适用于 960 的宽度和 500 的高度，那么 2000 的比例将适用于 480 的宽度和 250 的高度。有了这个我们可以使用一些简单的数学:

var scale = 960/width*1000;//假设宽度总是有限的

如果宽度或高度可能受到限制，请使用上述逻辑找到两者的比例值并取较高的比例值。然后将比例应用于 map ，就像您的示例现在所做的那样:projection.scale(scale);。这使您可以轻松地缩放 map ，并且在 d3v3 中也是如此(就像您的示例 block 一样)。