如何在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）之外，您可以更改投影。无论svg大小如何，投影都会确定您的要素占用多少空间。最简单的方法是在d3v4 +中使用projection.fitSize()：

projection.fitSize([width,height],feature);

width和height是您的svg维度，feature是您的geojson要素集合（json在您的示例中，而不是json.features，它需要一个对象，而不是一个数组）。此方法设置投影的比例和平移，以便您的svg /画布适当地对齐您的要素并进行缩放。

或者，假设所有fitSize都设置了投影的平移和比例，您可以直接修改这些属性以设置适当的比例和平移。由于您的示例将投影置于[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中缩放（例如您的示例块）。