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

Recherche :

Mot : Pseudo : Filtrer
Bas de page
Auteur	Sujet : [Javascript - D3] Ajouter une variable de colorisation de flux

Magicpanda

Pushing the envelope

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

Publicité

Magicpanda

Pushing the envelope

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 :

.directive('colors', function ($rootScope) {
return {
restrict: 'A',
templateUrl : 'templates/colors.html',
link: function postLink(scope, element, attrs) {
scope.scales = [
{
type : 'Ordinal (categories)',
value : d3.scale.ordinal().range(raw.divergingRange(1)),
reset : function(domain){ this.value.range(raw.divergingRange(domain.length || 1)); },
update : ordinalUpdate
},
/*{
type : 'Ordinal (max 20 categories)',
value : d3.scale.category20(),
reset : function(){ this.value.range(d3.scale.category20().range().map(function (d){ return d; })); },
update : ordinalUpdate
},
{
type : 'Ordinal B (max 20 categories)',
value : d3.scale.category20b(),
reset : function(){ this.value.range(d3.scale.category20b().range().map(function (d){ return d; })); },
update : ordinalUpdate
},
{
type : 'Ordinal C (max 20 categories)',
value : d3.scale.category20c(),
reset : function(){ this.value.range(d3.scale.category20c().range().map(function (d){ return d; })); },
update : ordinalUpdate
},
{
type : 'Ordinal (max 10 categories)',
value : d3.scale.category10(),
reset : function(){ this.value.range(d3.scale.category10().range().map(function (d){ return d; })); },
update : ordinalUpdate
},*/
{
type : 'Linear (numeric)',
value : d3.scale.linear().range(["#f7fbff", "#08306b"]),
reset : function(){ this.value.range(["#f7fbff", "#08306b"]); },
update : linearUpdate
}
];
function ordinalUpdate(domain) {
if (!domain.length) domain = [null];
this.value.domain(domain);
listColors();
}
function linearUpdate(domain) {
domain = d3.extent(domain, function (d){return +d; });
if (domain[0]==domain[1]) domain = [null];
this.value.domain(domain).interpolate(d3.interpolateLab);
listColors();
}
scope.setScale = function(){
scope.option.value = scope.colorScale.value;
scope.colorScale.reset(scope.colorScale.value.domain());
$rootScope.$broadcast("update" );
}
function addListener(){
scope.colorScale.reset(scope.colorScale.value.domain());
scope.option.on('change', function (domain){
scope.option.value = scope.colorScale.value;
scope.colorScale.update(domain);
})
}
scope.colorScale = scope.scales[0];
scope.$watch('chart', addListener)
scope.$watch('colorScale.value.domain()',function (domain){
scope.colorScale.reset(domain);
listColors();
}, true);
function listColors(){
scope.colors = scope.colorScale.value.domain().map(function (d){
return { key: d, value: scope.colorScale.value(d)}
}).sort(function (a,b){
if (raw.isNumber(a.key) && raw.isNumber(b.key)) return a.key - b.key;
return a.key < b.key ? -1 : a.key > b.key ? 1 : 0;
})
}
scope.setColor = function(key, color) {
var domain = scope.colorScale.value.domain(),
index = domain.indexOf(key),
range = scope.colorScale.value.range();
range[index] = color;
scope.option.value.range(range);
$rootScope.$broadcast("update" );
}
scope.foreground = function(color){
return d3.hsl(color).l > .5 ? "#000000" : "#ffffff";
}
scope.$watch('option.value', function (value){
if(!value) scope.setScale();
})
}
};
})

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

Code :

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

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

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 Javascript	Valeur 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

Page générée en 0.051 secondes