geoChoroplethChart est noir avec deux options de valeur pour une clé

Question

J'ai les données suivant fonctionne avec dc.js et geoChoroplethChart,

var data = crossfilter([ 
{ state: 'one', bar: 'A', num: '1' }, 
{ state: 'two', bar: 'B', num: '2' }, 
{ state: 'three', bar: 'A', num: '3' }, 
{ state: 'one', bar: 'B', num: '3' }, 
{ state: 'one', bar: 'A', num: '2' }, 
{ state: 'two', bar: 'B', num: '2' }, 
]); 


var statedim=data.dimension(function(d){return d['state'];}) 
var my_group=statedim.group(); 

reducer=reductio(); 
reducer.value('nbar').exception(function(d){return d['bar']}.exceptionCount(true); 
reducer.value('nnum').exception(function(d){return d['num']}.exceptionCount(true); 


reducer(my_group); 

où l'Etat est une région dans mon pays et la couleur est basée sur nNum, donc j'utilise

.valueAccessor(function (d) {return d.value.nnum.exceptionCount}) 

mais je le veux dans le titre apparaissent l'état, nnum et nbar.

.title(function(d){ 
return["state: " +d.key, 
"#nnum: "+d.value].join('\n')}) 

mais je ne sais pas comment intégrer nbar dans le titre sans geoChoroplethChart est noir.

Je pense que dans l'utilisation

.valueAccessor(function (d) {return d.value}) 

.title(function(d){ 
return["state: " +d.key, 
"#nnum: "+d.value.nnum.exceptionCount, 
"nbar:" +d.value.nbar.exceptionCount].join('\n')}) 

Il est la solution pour le titre, mais les états de remplissage en noir et quand je clique sur un autre graphique, la carte ne réagit pas.

Answer 1

La façon dont le geoChoropleth traite les données est définitivement assez bizarre. Tous les autres graphiques lient les données du filtre croisé au fichier SVG; geoChoropleth binds the map data and hides the crossfilter data in an internal object. Ensuite, il fausse les données liées pour les accesseurs. De plus, comme vous le signalez, il stocke le résultat du valueAccessor() dans ses données cachées, plutôt que de lier les données brutes, puis d'utiliser le valueAccessor en cas de besoin. Je suis à peu près sûr que c'est une mauvaise idée.

Mais assez se plaindre. Trouvons la solution, comme d'habitude.

Il s'avère que vous n'avez pas besoin de forer dans l'accesseur de valeur pour obtenir les bonnes couleurs. Vous pouvez laisser le valueAccessor par défaut, et il va chercher d.value. Utilisez ensuite le colorAccessor pour obtenir les couleurs droite:

.colorAccessor(function(d){ 
    return d ? d.nbar.exceptionCount : null; 
}) 

Notez la garde contre des données non définies, un résultat de la même bizarrerie.

Nous avons également besoin de se prémunir contre une value dans le accesseur titre non défini, car le tableau est construit paires clé/valeur à partir des données cartographiques, pas les données de crossfilter:

.title(function(d){ 
    var arr = ["state: " + d.key]; 
    if(d.value) // have to guard against null data for "other" states 
    arr.push(
    "#nnum: "+d.value.nnum.exceptionCount, 
    "nbar:" +d.value.nbar.exceptionCount 
    ); 
    return arr.join('\n'); 
}) 

Fourchette de votre violon: https://jsfiddle.net/gordonwoodhull/7qb3yujj/14/