着色 DC.JS 等值线图

Question

正在尝试为 DC.JS 等值线图着色。默认 colorAccessor 不工作，我不知所措。任何帮助都将是巨大的。我觉得一些自定义 reduce 函数是必要的，但我不太确定如何或在哪里。

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");

Answer 1

您没有定义从哪里获取值的 overlayGeoJson 函数

你这样定义的：

overlayGeoJson(statesJson.features ,"zip_area");

应该是

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

现在 b'coz 上面的函数 returns 邮政编码所以 d.value 将是 undefined

.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

希望对您有所帮助！

着色 DC.JS 等值线图

Coloring DC.JS Choropleth Charts

graph

d3.js

dc.js

graph-coloring

choropleth