Dc.js permalink ou href pour partager l'état du filtre de visualisation?
Je travaille sur dataviz avec dc.js ( http://edouard-legoupil.github.io/3W-Dashboard/ )
La principale limitation est que lorsque les utilisateurs trouvent un fait spécifique alors qu'ils explorent les données, il n'est pas facile de reproduire les filtres exacts qu'ils ont utilisés afin de partager leurs résultats avec d'autres utilisateurs (et d'initier une discussion). Une solution pourrait être d'avoir des permtachistes pour chaque état de filtre.
Dc.js a déjà le "dc.redrawAll ();" Pour réinitialiser tout filtre, mais il est possible de geler un certain état de filtres et de le passer à un #href?
Idéalement, href serait alors partagé via un bouton de partage ou via la fonction de partage de partage facebook / twitter.
- D3 Crossfilter exemple de base
- Redessiner les histogrammes avec Crossfilter et D3
- Exporter des données à partir de dc.js dataTable en CSV
- Utilisation d'une échelle ordinaire («d3.scale.ordinal») pour l'axe des x dans un diagramme à barres
- Afficher les valeurs au dessus des barres dans un barChart
Tout extrait de code ou d'exemples vous aidera vraiment!
Merci d'avance, Edouard
- Sélection de la gamme initiale dans le diagramme DC.js
- Dc.js – comment créer un tableau de lignes à partir de plusieurs colonnes
- Existe-t-il un moyen de dire au filtre transversal de traiter les éléments du tableau comme des enregistrements distincts au lieu de traiter l'ensemble de la matrice en tant que clé unique?
Voici les méthodes clés que vous souhaitez utiliser:
- Dc.chartRegistry.list (): récupère un tableau de tous les tableaux que DC a chargés
- Chart.filters (): récupère un tableau de tous les filtres pour un tableau donné
- Chart.filter (): applique un filtre à un tableau donné
- Dc.redrawAll (): redessine tous les graphiques après l'application de filtres externes
De là, il s'agit simplement de sérialiser et de désérialiser les objets.
Voici une façon de le faire en stringant un objet JSON:
var filters = []; for (var i = 0; i < dc.chartRegistry.list().length; i++) { var chart = dc.chartRegistry.list()[i]; for (var j = 0; j < chart.filters().length; j++){ filters.push({ChartID: chart.chartID(), Filter: chart.filters()[j]}); } } var urlParam = encodeURIComponent(JSON.stringify(filters)); Voici le processus inverse de l'analyse de la chaîne JSON et l'application des filtres:
var urlParam = ""; //have user input string somehow var filterObjects = JSON.parse(decodeURIComponent(urlParam)); for (var i = 0; i< filterObjects.length; i++) { dc.chartRegistry.list()[filterObjects[i].ChartID-1].filter(filterObjects[i].Filter); } dc.redrawAll();
La connexion des deux étapes dépendra de votre scénario. Vous pouvez peut-être enregistrer la chaîne dans la base de données ou l'ajouter comme un paramètre d'URL.
Ce code pourrait manquer certains cas de bord, mais il semble fonctionner pour les exemples basiques de dc.js.