dc.js responive GeoJSON的美國地圖

測試與下面的示例代碼： http://dc-js.github.io/dc.js/vc/dc.js responive GeoJSON的美國地圖

我想使這個地圖響應容器/窗口大小。但是，我見過的例子使用topojson和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"; 
       });

來源

2014-10-08 user2923767

您可以按照與鏈接到的方法完全相同的方法（techSlides）。

它包括用一個新的替換整個svg重新調整窗口大小後。重繪時，唯一發生變化的是您用作元素的尺寸的寬度和高度。

無論您的數據是GeoJson還是TopoJson都不會影響到這一點。

此技術的一個更平滑的變體是調整窗口大小調整現有的svg元素，而不進行重繪。只需添加SVG viewBox和preserveAspectRatio="xMinYMin"，以保持SVG內的投影。

示例in this blog及其javascript。

來源

2014-10-08 07:58:00

不幸的是，這改變了容器的大小和地圖不重繪。看看這個例子。 http://bl.ocks.org/jczaplew/4444770其中也使用 – user2923767 2014-10-08 12:23:51

您需要使用'viewBox'和' preserveAspectRatio'屬性。以下是您的要點更新：https://gist.github.com/mef/566bc47c8939f69fda4f – 2014-10-08 13:52:55

是的。謝謝。我之前也看到過這個代碼，但它也使用topojson.v0.min.js來重繪地圖。看看這段代碼。數據（topojson.object（美國，us.objects.states）.geometries） \t。進入（）。追加（「路徑」） \t \t .attr（「類」，「狀態」） \t \t .attr（「d」，path）; \t}）; – user2923767 2014-10-08 21:43:20

dc.js responive GeoJSON的美國地圖

回答

相關問題