dc.js responive GeoJSON США карта

Question

Тестирование с помощью следующих образцов кода: http://dc-js.github.io/dc.js/vc/

Я хотел бы, чтобы эта карта реагирует на размер контейнера/окна. Однако примеры, которые я видел, использовали топожион и SVG для масштабирования карты. http://techslides.com/demos/d3/d3-worldmap-boilerplate.html

Невозможно ли с Geojson обновить размер карты аналогичным образом?

d3.json("../geo/us-states.json", function (statesJson) { 
     usChart.width(990) 
       .height(500) 
       .dimension(states) 
       .group(stateRaisedSum) 
       .colors(d3.scale.quantize().range(["#E2F2FF", "#C4E4FF", "#9ED2FF", "#81C5FF", "#6BBAFF", "#51AEFF", "#36A2FF", "#1E96FF", "#0089FF", "#0061B5"])) 
       .colorDomain([0, 200]) 
       .colorCalculator(function (d) { return d ? usChart.colors()(d) : '#ccc'; }) 
       .overlayGeoJson(statesJson.features, "state", function (d) { 
        return d.properties.name; 
       }) 
       .title(function (d) { 
        return "State: " + d.key + "\nTotal Amount Raised: " + numberFormat(d.value ? d.value : 0) + "M"; 
       }); 

Answer 1

Вы можете использовать тот же подход, что и тот, с которым вы связались (techSlides).

Он состоит из замены целого svg на новый нарисованный после изменения размера окна. При перерисовке единственное, что меняется, это ширина и высота, которые вы используете в качестве размеров элемента svg.

Независимо от ваших данных GeoJson от TopoJson не влияет на это.

Более плавный вариант этой техники заключается в изменении размера существующего элемента svg при изменении размера окна, без выполнения перерисовки. Просто добавьте SVG viewBox и preserveAspectRatio="xMinYMin", чтобы сохранилась проекция внутри SVG.

Пример in this blog и его javascript.