dc.js geoChoroplethChart n'affiche pas la légende

Question

J'essaie de tracer un choroplèthe DC, mais la légende ne s'affiche pas. Voici l'exemple de fichier : 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));

Pourquoi la légende est-elle affichée comme 0x0 ?

Answer 1

J'ai essayé de faire fonctionner la légende avec les geoChoroplethCharts également et malheureusement le support de la légende ne semble pas avoir été implémenté dans dc. Il y a quelques fonctions (legendables, legendHighlight, legendReset, legendToggle, ect...) qui ont été définies dans le dc base-mixin et qui devraient être étendues avant que le support des légendes ne fonctionne.

Pour un exemple, regardez la source de pieChart :

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

Versus de la soruce pour geoChoroplethChart :

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

Vous remarquerez qu'au bas de la source du camembert, les fonctions de légende associées ont été étendues. Je pense que quelque chose de similaire devrait être fait pour le code source du geoChoroplethChart.

EDIT :

J'ai travaillé à partir de votre jsfiddle et j'ai pu obtenir une étiquette simple à afficher sur le 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

Voici ma modification - pour une carte continue - de la solution et du commentaire de @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)
    );