autoriser brosse sur le diagramme à barres ordinales en utilisant dc.js

Question

Je suis en train de créer un graphique à barres avec des valeurs ordinales sur l'axe des x en utilisant dc.js et également activer le pinceau sur elle. Le pinceau est utilisé pour filtrer d'autres graphiques par exemple un graphique à bulles et un graphique à lignes ... J'ai réussi à créer tous les graphiques mais le problème principal est que le pinceau ne peut pas filtrer d'autres graphes en fonction de ce qui est sélectionné d'autres graphiques peuvent filtrer le graphique à barres avec le pinceau.

J'utilise le code des vièles dans le numéro brush on ordinal barchart dc.js

Answer 1

Merci d'avoir soulevé cette. La solution que j'ai donnée sur le ticket cité était incomplète, et je l'ai mise à jour.

Il n'a pris en compte que la valeur de retour de filterFunction, qui sera utilisée pour afficher la brosse. Il n'a pas réellement appliqué le filtre, qui est l'objectif principal de filterFunction!

Deux modifications sont requises. Tout d'abord, nous devons vérifier si le tableau de filtres est vide et effacer le filtre de la dimension si c'est le cas. Deuxièmement, nous devons appliquer le filtre résultant à la dimension s'il y en a un.

Ainsi, au lieu de

chart.filterHandler(function(dimension, filters) { 
    return filters.map(function(rangefilt) { 
    var low = keys[Math.ceil(rangefilt[0])], high = keys[Math.ceil(rangefilt[1])] || 'zzz'; 
    return dc.filters.RangedFilter(low,high); 
    }); 
}); 

nous obtenons

kpiMoveChart.filterHandler(function(dimension, filters) { 
    if(filters.length === 0) { 
     dimension.filter(null); 
     return filters; 
    } 
    // actually should only contain one filter but use .map as a convenience 
    var filters2 = filters.map(function(rangefilt) { 
     var low = keys[Math.ceil(rangefilt[0])], high = keys[Math.ceil(rangefilt[1])] || 'zzzz'; 
     return dc.filters.RangedFilter(low,high); 
    }); 
    dimension.filterRange(filters2[0]); 
    return filters2; 
}); 

En outre, vous avez eu une petite faute de frappe: au lieu de keys[Math.ceil(rangefilt[1]) || 'zzzz'] il devrait être keys[Math.ceil(rangefilt[1])] || 'zzzz'

Enfin, dans votre diagramme à bulles, il n'est généralement pas nécessaire de remplacer yAxisMin et les amis afin de changer le domaine des cartes. Si vous voulez fixer le domaine, il est beaucoup plus élégant pour désactiver élastique et définir le domaine directement:

kpiBubbleChart 
    .y(d3.scale.linear().domain([-10, 160])) 

(Redéfinition xAxisMin et xAxisMax ne semble pas avoir d'effet, car cette échelle est ordinale, il est donc toujours . va utiliser la liste des clés)

Voici ma fourchette de votre violon: https://jsfiddle.net/gordonwoodhull/g34Ldwaz/9/