d3.js - 将 choropleth 数据映射调整为数据映射中的容器

Question

我正在尝试创建一个仪表板，并且我使用了从这里获得的 choropleth 数据图。

我的问题是，当我尝试调整数据映射图的大小以适合我的容器时，它没有正确缩放。

那么如何将地图缩放到一个容器中

width=100% and height = 450px.

希望你能在这里帮助我

Answer 1

使用 d3 获取容器的大小：

var containerw = d3.select(".containerclass").style("width');
var containerh = d3.select(".containerclass").style("height');

现在在您的 svg 上使用这些值：

var map = d3.select('.containerclass').append("svg").attr('class','map');

map.style('width',parseInt(containerw) + 'px').style('height',parseInt(containerh) + 'px');