Graphiques dc.js avec 2 ensembles de données différents et un graphique mettant à jour l'autre

Question

Je suis en train d'essayer de connecter 2 graphiques différents avec des ensembles de données différents avec dc.js.

Le premier graphique en forme de donut devrait servir de filtre pour le graphique en courbes mais je n'ai pas trouvé comment établir la connexion entre les deux.

Je préférerais ne pas joindre ces ensembles de données car ils pourraient devenir importants et joindre n'aurait pas beaucoup de sens.

J'ai essayé de capturer les éléments sélectionnés et de les filtrer dans le graphique en courbes

 sobRingChart.on('filtered', function(chart) {
   PUchart.filter(null)
   .filter(chart.filters());
   dc.redrawAll()
});

Exemple http://jsfiddle.net/yccu/qBr7y/32/

Answer 1

Vous avez la bonne idée, c'est juste un désaccord de données.

La chose importante à comprendre est que tous les filtres dans crossfilter se font à travers les objets de dimension. La valeur que vous filtrez doit être compatible avec la dimension sur laquelle vous filtrez.

Par conséquent, puisque votre graphique en ligne est basé sur le temps, vous ne pourrez pas le filtrer par Source. Vous devrez configurer une autre dimension pour le faire :

var sourceDim2 = spendData2.dimension(function(d) { return d.Source; })

Ensuite, filtrez cette dimension plutôt que le graphique en ligne :

 sobRingChart.on('filtered', function(chart) {
   if(chart.filters().length)
     sourceDim2.filterFunction(function(k) {
       return chart.filters().indexOf(k) !== -1;
     });
   else sourceDim2.filter(null);
   dc.redrawAll()
 });

C'est compliqué seulement parce qu'il doit gérer le filtrage sur plusieurs valeurs (lorsque plus d'une tranche du graphique en anneau est sélectionnée). Crossfilter ne le rend pas simple, probablement parce que ce n'est pas très efficace. (Ce n'est généralement pas très important.)

Nous devons donc voir s'il y a des filtres. S'il y en a, nous définissons une fonction de filtre qui vérifie si la clé actuellement considérée est dans chart.filters(). Sinon, nous appelons .filter(null) pour effacer le filtre.

Answer 2

Excellent! J'ai mis à jour l'exemple de @YCuvelie avec de petites modifications dans les instructions de D3, ICI c'est l'exemple fonctionnel avec D3.V5

Au lieu de d3.scale.linear() j'ai utilisé d3.scaleLinear() et j'ai inclus la dernière version de D3