d3.js - dc.js geoChoroplethChart 不显示图例

Question

我正在尝试绘制一个 dc choropleth ，但不知何故没有显示图例。 这是示例 fiddle : http://jsfiddle.net/susram/9VJHe/56/

        usChart
        .width(1200)
        .height(500)
        .dimension(state_dim)
        .group(latest_mean_sqft_per_state)
        //.colors(d3.scale.quantize().range(["#E2F2FF", "#C4E4FF", "#9ED2FF", "#81C5FF", "#6BBAFF", "#51AEFF", "#36A2FF", "#1E96FF", "#0089FF", "#0061B5"]))
        .colors(d3.scale.quantize().range(["#fff7fb","#ece2f0","#d0d1e6","#a6bddb","#67a9cf","#3690c0","#02818a","#016c59","#014636"]))
        //.colors(d3.scale.quantize().range(d3.schemeBlues()(9)))
        .colorDomain([0, 500])
        //.colorAccessor(function (d) { /*console.log(d);*/ return d? usChart.colors(d.avg_psft) : '#ccc'; })
        .colorAccessor(function (d) { /*console.log(d);*/ return d.avg_psft; })
        .overlayGeoJson(statesJson.features, "state", function (d) {
            return d.properties.name;
        })
        .valueAccessor(function(kv) {
            console.log(kv);
            return kv.value;
        })
        .title(function (d) {
            return "State: " + d.key + "\nAverage Price per SqFt: " + numberFormat(d.value.avg_psft ? d.value.avg_psft : 0) + "M";
        })
        .legend(dc.legend().x(1300).y(80).itemHeight(13).gap(5));

为什么图例显示为 0x0？

Answer 1

我一直在尝试让图例也与 geoChoroplethCharts 一起使用，不幸的是图例支持似乎尚未在 dc 中实现。在 dc base-mixin 中定义了一些函数(legendables、legendHighlight、legendReset、legendToggle 等...)，需要在图例支持起作用之前对其进行扩展。

例如，查看 pieChart 的源代码:

https://github.com/dc-js/dc.js/blob/develop/src/pie-chart.js

与 geoChoroplethChart 的来源相比:

https://github.com/dc-js/dc.js/blob/develop/src/geo-choropleth-chart.js

您会在 pieChart 源代码的底部注意到相关的图例函数已扩展。我相信需要对 geoChoroplethChart 源代码做类似的事情。

编辑:

我处理了你的 jsfiddle，并能够得到一个简单的标签来显示在 geoChoroplethChart 上:http://jsfiddle.net/Lx3x929v/2/

usChart.legendables = function () {
    return usChart.group().all().map(function (d, i) {
        var legendable = {name: d.key, data: d.value, others: d.others, 
        chart: usChart};
        legendable.color = usChart.colorCalculator()(d.value);
        return legendable;
    });
};