2015-12-21 29 views
3

嘗試着色DC.JS等值線圖表。默認colorAccessor不起作用,並且我無法正常工作。任何幫助將是巨大的。我覺得自定義縮減功能是必要的,但我不太確定如何或在哪裏。着色DC.JS Choropleth圖表

http://codepen.io/MichaelArledge/pen/vLKZzE?editors=001

 chart.width(c_w) 
       .height(c_h) 
       .dimension(zip_code_dim) 
       .group(zip_totals) 
       .projection(projection) 
       .colorAccessor(function(d){ console.log(d); return d.value; }) 
       .overlayGeoJson(statesJson.features ,"zip_area"); 

回答

3

您還沒有確定從哪裏獲得

你這樣定義的值overlayGeoJson功能:

overlayGeoJson(statesJson.features ,"zip_area"); 

本來應該

.overlayGeoJson(statesJson.features ,"zip_area", 
function(d){ return d.properties.zip}) 

現在b'coz上述函數返回郵遞區號這樣d.valueundefined

.colorAccessor(function(d){ return d.value; }) 

它應該是

.colorAccessor(function (d) { return colors(d); }); 

我已經定義爲顏色其值應從colorAccessor函數返回的線性標尺。

var colors = d3.scale.linear().range(["#E2F2FF", "#C4E4FF", "#9ED2FF", "#81C5FF", "#6BBAFF", "#51AEFF", "#36A2FF", "#1E96FF", "#0089FF", "#0061B5"]); 

完整的工作代碼here

希望這有助於!

+0

完美的作品。非常感謝。一遍又一遍重讀文檔,這個概念從未點擊。謝謝。 –