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

Ajouter une variable de colorisation de flux [Javascript - D3] - Javascript/Node.js - Programmation

Marsh Posté le 11-11-2014 à 23:47:57    

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
Reply

Marsh Posté le 11-11-2014 à 23:47:57   

Reply

Marsh Posté le 12-11-2014 à 10:53:45    

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
Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed