Forum |  HardWare.fr | News | Articles | PC | Prix | S'identifier | S'inscrire | Aide | Shop Recherche
1556 connectés 

  FORUM HardWare.fr
  Programmation
  Javascript/Node.js

  [Javascript - D3] Ajouter une variable de colorisation de flux

 



 Mot :   Pseudo :  
 
Bas de page
Auteur Sujet :

[Javascript - D3] Ajouter une variable de colorisation de flux

n°2242716
Magicpanda
Pushing the envelope
Posté le 11-11-2014 à 23:47:57  profilanswer
 

Bonjour à tous,  
 
j'utilise le module de graphique alluvial de density design
 
http://app.raw.densitydesign.org/#%2F
 
Voici le script correspondant
 
https://github.com/densitydesign/ra [...] lluvial.js
 
C'est une modification du module sankey de D3.
Cette modification permet notamment des boucles (avoir le meme node au départ et à l'arrivée d'un flux)
Il permet aussi la colorisation des flux, mais seulement les valeurs uniques de la variable d'origine des flux
 
j'aimerai pouvoir faire la colorisation selon les modalités d'une quatrième variable
 
donc je cherche a modifier le code pour inclure cette 4e variable et en faire le critère de discrétisation des couleurs
 
si vous avec une idée de la marche  à suivre je suis preneur :jap:


---------------
" Quel est le but du capital ? Le but du capital c'est produire pour le capital. L'objectif, lui, est illimité. L'objectif du capital c'est produire pour produire." - Deleuze || André Gorz - Vers la société libérée
mood
Publicité
Posté le 11-11-2014 à 23:47:57  profilanswer
 

n°2242746
Magicpanda
Pushing the envelope
Posté le 12-11-2014 à 10:53:45  profilanswer
 

J'ai bien lu la doc de l'API
https://github.com/densitydesign/raw/wiki/API-Reference
 
Il semble donc que ce soit un autre bout du code qui gère la colorisation, ce qui ne m'arrange pas mais je vais essayer de me débrouiller.
Il s'agit donc de ce script :  
https://github.com/densitydesign/ra [...] ectives.js
 
notamment cette directive
 

Code :
  1. .directive('colors', function ($rootScope) {
  2. return {
  3. restrict: 'A',
  4. templateUrl : 'templates/colors.html',
  5. link: function postLink(scope, element, attrs) {
  6. scope.scales = [
  7. {
  8. type : 'Ordinal (categories)',
  9. value : d3.scale.ordinal().range(raw.divergingRange(1)),
  10. reset : function(domain){ this.value.range(raw.divergingRange(domain.length || 1)); },
  11. update : ordinalUpdate
  12. },
  13. /*{
  14. type : 'Ordinal (max 20 categories)',
  15. value : d3.scale.category20(),
  16. reset : function(){ this.value.range(d3.scale.category20().range().map(function (d){ return d; })); },
  17. update : ordinalUpdate
  18. },
  19. {
  20. type : 'Ordinal B (max 20 categories)',
  21. value : d3.scale.category20b(),
  22. reset : function(){ this.value.range(d3.scale.category20b().range().map(function (d){ return d; })); },
  23. update : ordinalUpdate
  24. },
  25. {
  26. type : 'Ordinal C (max 20 categories)',
  27. value : d3.scale.category20c(),
  28. reset : function(){ this.value.range(d3.scale.category20c().range().map(function (d){ return d; })); },
  29. update : ordinalUpdate
  30. },
  31. {
  32. type : 'Ordinal (max 10 categories)',
  33. value : d3.scale.category10(),
  34. reset : function(){ this.value.range(d3.scale.category10().range().map(function (d){ return d; })); },
  35. update : ordinalUpdate
  36. },*/
  37. {
  38. type : 'Linear (numeric)',
  39. value : d3.scale.linear().range(["#f7fbff", "#08306b"]),
  40. reset : function(){ this.value.range(["#f7fbff", "#08306b"]); },
  41. update : linearUpdate
  42. }
  43. ];
  44. function ordinalUpdate(domain) {
  45. if (!domain.length) domain = [null];
  46. this.value.domain(domain);
  47. listColors();
  48. }
  49. function linearUpdate(domain) {
  50. domain = d3.extent(domain, function (d){return +d; });
  51. if (domain[0]==domain[1]) domain = [null];
  52. this.value.domain(domain).interpolate(d3.interpolateLab);
  53. listColors();
  54. }
  55. scope.setScale = function(){
  56. scope.option.value = scope.colorScale.value;
  57. scope.colorScale.reset(scope.colorScale.value.domain());
  58. $rootScope.$broadcast("update" );
  59. }
  60. function addListener(){
  61. scope.colorScale.reset(scope.colorScale.value.domain());
  62. scope.option.on('change', function (domain){
  63. scope.option.value = scope.colorScale.value;
  64. scope.colorScale.update(domain);
  65. })
  66. }
  67. scope.colorScale = scope.scales[0];
  68. scope.$watch('chart', addListener)
  69. scope.$watch('colorScale.value.domain()',function (domain){
  70. scope.colorScale.reset(domain);
  71. listColors();
  72. }, true);
  73. function listColors(){
  74. scope.colors = scope.colorScale.value.domain().map(function (d){
  75. return { key: d, value: scope.colorScale.value(d)}
  76. }).sort(function (a,b){
  77. if (raw.isNumber(a.key) && raw.isNumber(b.key)) return a.key - b.key;
  78. return a.key < b.key ? -1 : a.key > b.key ? 1 : 0;
  79. })
  80. }
  81. scope.setColor = function(key, color) {
  82. var domain = scope.colorScale.value.domain(),
  83. index = domain.indexOf(key),
  84. range = scope.colorScale.value.range();
  85. range[index] = color;
  86. scope.option.value.range(range);
  87. $rootScope.$broadcast("update" );
  88. }
  89. scope.foreground = function(color){
  90. return d3.hsl(color).l > .5 ? "#000000" : "#ffffff";
  91. }
  92. scope.$watch('option.value', function (value){
  93. if(!value) scope.setScale();
  94. })
  95. }
  96. };
  97. })


 
Si je comprend bien, je peux virer la fonction numérique, et je dois pouvoir injecter une autre variable pour la colorisation ordinale :  
 

Code :
  1. value : d3.scale.ordinal().range(raw.divergingRange(1)),


Message édité par Magicpanda le 12-11-2014 à 10:56:09

---------------
" Quel est le but du capital ? Le but du capital c'est produire pour le capital. L'objectif, lui, est illimité. L'objectif du capital c'est produire pour produire." - Deleuze || André Gorz - Vers la société libérée

Aller à :
Ajouter une réponse
  FORUM HardWare.fr
  Programmation
  Javascript/Node.js

  [Javascript - D3] Ajouter une variable de colorisation de flux

 

Sujets relatifs
[PHP]Aide Débutant Ajouter Captcha formulaire de contact existant[VBA Excel] listbox activex variable
Cacher/Afficher en JavascriptValeur de variable aléatoire / intervalle de temps
variable NULL = zéro?Ajouter un style CSS à une image
Affecter à une variable la valeur d'un include[Excel][VBA] Ajouter plusieurs séries à un plot nb données variables
Faire d'une variable une constante[RÉSOLU] Problème fenêtre modale et notifications
Plus de sujets relatifs à : [Javascript - D3] Ajouter une variable de colorisation de flux


Copyright © 1997-2018 Hardware.fr SARL (Signaler un contenu illicite) / Groupe LDLC / Shop HFR