Crossfilter與DC.js Choropleth地圖

只用D3，我能夠得到我想要的結果，但與DC.js我面臨一些問題，我的猜測是，這是因爲我缺乏工作的知識與Crossfilter。Crossfilter與DC.js Choropleth地圖

我的CSV數據看起來像這樣：

ccgcode,ccgname,metric,male,female 
06M,Great Yarmouth And Waveney,3,50,70 
05G,North Staffordshire,3,40,60 
... etc

我的JavaScript如下：

'use strict' 

var numberFormat = d3.format(".2f"); 
var ccgMap  = dc.geoChoroplethChart('.map-wrap'); 
// var sexPieChart = dc.pieChart('.pie-chart'); 

d3.csv('../data/metricdata.csv', function (data) { 
    var data = crossfilter(data); 

    var ccgs = data.dimension(function (d) { 
     return d['ccgcode']; 
    }); 

    var ccgMetric = ccgs.group(); 

    d3.json("../data/ccg.json", function (map) { 
     ccgMap.width(800) 
      .height(800) 
      .dimension(ccgs) 
      .group(ccgMetric) 
      .colors(d3.scale.quantize().range(["#7cbd30", "#0066cc", "#ee2e11"])) 
      .colorDomain([0, 200]) 
      .colorCalculator(function (d) { return d ? ccgMap.colors()(d) : '#ccc'; }) 
      .overlayGeoJson(topojson.feature(map, map.objects.ccg).features, "CCGcode", function (d) { 
       return d.properties.CCGcode; 
      }); 

     dc.renderAll(); 
    }); 
});

該代碼的絕大部分，我from here。所以我知道我以後會遇到一些問題，當我着色..等等，但現在我甚至無法得到地圖顯示！

我只是得到一個空白頁！我可以看到SVG正在繪製到頁面上，但它沒有路徑信息！

我在做什麼錯？我在Crossfilter中看到的所有示例都有非常好的細粒度數據，這很好，但是在我的情況下，DBA已經將粒度數據分組到CCG代碼組中。

如果您在問爲什麼要使用Crossfilter，那是因爲我想稍後使用它（通過創建一個性別維度）來驅動一個女性/男性餅圖，當一個特定的CCG（只是一個區域地圖）被點擊。

來源

2016-04-26 Ciwan

如果你沒有路徑信息，那麼我假設你的地圖沒有被繪製。這是overlayGeoJSON調用或您的地圖數據的問題。如果你在JSFiddle或者Codepen或者類似的服務上編寫了一個工作示例，它將更容易幫助你。 –

謝謝@EthanJewett，代碼是[here]（http://finchcove.com/mapvis/）。 – Ciwan

有一些XHR問題，我現在已經解決了這些問題。所以你應該看到我所看到的，一個空白頁面（只顯示'h1'） – Ciwan

確定我已經得到了地圖顯示，這裏是我做過什麼：

顯然dc.geoChoroplethChart()只有GeoJSON工作，不TopoJSON這是我的東西。我使用this tool進行了轉換。
提供的錯誤代碼.projection()使用（like here），作爲默認爲d3.geo.albersUsa()不爲英國工作（沒有爲我）

許多感謝送給Xavier在this thread。

來源

2016-04-27 12:55:46 Ciwan

那麼你現在好嗎？將來，您可能需要記住，如果您創建一個工作的*可編輯*示例，則更有可能獲得幫助。瀏覽器開發工具已經有所改進，但試試修復JSFiddle之類的代碼比在普通的Web服務器上更容易:-) –

感謝@EthanJewett當我有外部庫引用時，仍然無法使用JSFiddle :( – Ciwan

）點擊左邊的「外部資源」部分，添加資源的URL，它們應該通過HTTPS提供，並啓用CORS，這意味着您無法直接從Github加載文件，而是使用rawgit.com。 –

Crossfilter與DC.js Choropleth地圖

回答

相關問題