如何在 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 中也是如此（就像您的示例塊）。