dc.js geoChoroplethChart宽度小于500作物的地图

Question

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

<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。

Answer 1

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

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

编辑：

以下是jsfiddle：http://jsfiddle.net/kzqkvpwa/

的示例