d3.js Diagramma di Sankey: rettangoli di colore di riempimento

Così sto giocando con il diagramma di Sankey d3.js.d3.js Diagramma di Sankey: rettangoli di colore di riempimento

enter image description here

In this example (foto sopra) colore è definito utilizzando

var color = d3.scale.category20();

Per ciascun nodo è un rettangolo, il rettangolo è riempito alterando stile:

.style("fill", function(d) { 
    return d.color = color(d.name.replace(/ .*/, "")); 
})

Sto cercando suggerimenti sull'utilizzo di colori personalizzati. Se volessi usare solo dire 6 colori, ma i colori del rettangolo del nodo sono scelti in base a un valore nel file .json.

Ad esempio, diciamo che volevo mostrare un grafico a forma di serpente di squadre nella NFL. I colori rappresentano ciascuno la divisione in cui giocano le squadre. Quindi se si spostano in una divisione diversa, il colore cambia. E i nodi sono creati per ogni stagione. Qualcosa in questo senso.

Quindi è possibile eseguire il

node.append("rect") 
    .attr("height", function(d) { return d.dy; }) 
    .attr("width", sankey.nodeWidth()) 
    .style("fill", function(d) { 
     return d.color = color(d.name.replace(/ .*/, "")); 
    }) 
    .style("stroke", function(d) { 
     return d3.rgb(d.color).darker(2); 
    }) 
    .append("title") 
    .text(function(d) { return d.name + "\n" + format(d.value); });

con il colore sulla base di un valore nel file JSON? Sto pensando solo a un'affermazione, ma c'è un modo più semplice? Potrei semplicemente includere il codice esadecimale del colore nel json?

fonte

2012-10-22 lucastimmons

si può solo aiutarmi in questa domanda: http://stackoverflow.com/questions/15752696/unable-to-color-the-map-in-d3 – user2213564

http://stackoverflow.com/questions/15752696/unable-to-color-the-map-in -d3 Potete aiutarmi su questo per favore. – user2213564

Suoni come se si desidera includere il colore nel JSON in questo caso. Puoi includerlo in qualsiasi modo riconosciuto dal browser, ad es. come nome ("bianco") o esadecimale ("#fff"). Vedere lo SVG spec per un elenco completo delle specifiche del colore supportate.

fonte

2012-10-22 09:27:55

Grazie. Questo è quello che stavo pensando. Basato su quello che sto facendo, funzionerà perfettamente. .style ("fill", function (d) {return d.color;}) sta ora estraendo un colore dal file .json associato a ciascun nodo. – lucastimmons

In alternativa, è possibile associare esplicitamente i colori alla divisione con una scala ordinale d3 come indicato nello documentation. Vedi Colorbrewer in basso.

var color = d3.scale.ordinal() 
    .domain(["foo", "bar", "baz"]) 
    .range(["#fff","#000","#333"]);

e poi

.attr("fill", function(d) { return color(d.division); });

fonte

2012-10-22 14:05:53 imrane

Grazie per questo. L'ho fatto funzionare, ma in base a quello che sto facendo, tirare i colori da Json è più facile. Ma questo sarà molto, molto utile in futuro. – lucastimmons

Sostituire const color = d3.scaleOrdinal(d3.schemeCategory20); con:

const color = d3.scaleOrdinal() 
.domain(["Crude oil","Natural gas",...]) 
.range(["#FD3E35","#FFCB06",...]);

E stare con:

.style('fill', (d,i) => { 
    d.color = color(d.name.replace(/ .*/, '')); 
    return d.color;})

fonte

2017-07-23 14:44:22

d3.js Diagramma di Sankey: rettangoli di colore di riempimento

risposta

Problemi correlati