dc.js geoChoroplethChart 宽度小于 500 裁剪地图答案

【问题标题】：dc.js geoChoroplethChart width smaller than 500 crops the mapdc.js geoChoroplethChart 宽度小于 500 裁剪地图
【发布时间】：2018-02-21 20:01:28
【问题描述】：

这是我用来绘制美国地图的代码

<div class="row">
    <div id='map' class="span12"></div>
</div>

window.map = dc.geoChoroplethChart('#map');
d3.json('us_states.json', function (statesJson) {
    map.height(500)
    .dimension(Proper_Dimension_No_bug_here_well_tested)
    .group(Proper_Group_No_bug_here_well_tested)
    .colors(from colorbrew)
    .colorDomain(derived from data)
    .colorAccessor(function (d) {
         return d;
    })
    .projection(d3.geo.albersUsa())
    .overlayGeoJson(statesJson.features, "state", function (d) {
         return d.properties.name;
     });
     dc.renderAll();
});

我怎样才能使这张地图更小？例如，高度 250 重量 480。更改 geoChoroplethChart 对象中的高度属性不会使地图变小，而是裁剪它。我也未能尝试通过内联 CSS 修复 map div 的高度。下图是高度设置为 300 的裁剪地图。

【问题讨论】：

查看d3.geo.projection的文档并相应地修改保护参数。

标签： d3.js dc.js choropleth

【解决方案1】：

您需要按比例缩小每个状态，而不仅仅是更改图表的高度/宽度。所以试试这个：

map.selectAll('g.state').each(function (d) {
    d3.select(this).attr('transform', 'scale(0.5)')
})

编辑：

这是一个 jsfiddle 示例：http://jsfiddle.net/kzqkvpwa/

【讨论】：