如何在 d3.js 中为这张地图设置高度和宽度

Question

我是新来的，我正在使用这张地图。 我有一个名为： #statesvg的 div 容器，我希望地图适应其大小。 但是这个被剪掉了。

我可以在代码的哪个部分修改地图的高度和宽度？

非常感谢

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],feature);

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

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

var scale = 960/width*1000; // assuming that width is always limiting

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