dc.js geoChoroplethChart不显示图例

Question

我正在尝试绘制一个直流等值线，但不知何故传说没有出现。 这是小提琴样本： 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;
    });
};  

Answer 2

以下是我对@MarcTifrea解决方案和评论的连续地图的修改。

    chart.legendables = function () {
        var domain = chart.colorDomain();
        return domain.map(function (d, i) {
            var legendable = {name: parseFloat((Math.round(domain[i] * 100000) /100000).toPrecision(2)) , chart: chart};
            if (i==1) legendable.name += ' unit'; // add the unit only in second(last) legend item
            legendable.color = chart.colorCalculator()(domain[i]);
            return legendable;
        });
    };

    chart.legend(
        dc.legend()
            .x(width/4)
            .y(height*4/5)
            .itemHeight(height/30)
            // .itemWidth(width/25)
            .gap(5)
            // .horizontal(1)
            // .autoItemWidth(1)
    );