d3.js Sankey-Diagramm: Rechtecke füllen Farbe

Also spiele ich mit dem d3.js Sankey-Diagramm herum.d3.js Sankey-Diagramm: Rechtecke füllen Farbe

enter image description here

In this example (im Bild oben) Farbe wird unter Verwendung von definierten

var color = d3.scale.category20();

Für jeden Knoten gibt ein Rechteck ist, und das Rechteck, das durch die Änderung der Art gefüllt ist:

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

Ich suche nach Vorschlägen zur Verwendung von benutzerdefinierten Farben. Wenn ich nur say 6 Farben verwenden möchte, aber die Farben des Knoten-Rechtecks basierend auf einem Wert in der .json-Datei ausgewählt haben.

Zum Beispiel sagen wir, ich wollte eine schlängelnde Karte von Teams in der NFL zeigen. Die Farben stellen jeweils dar, in welcher Division die Teams spielen. Wenn sie sich zu einer anderen Division bewegen, ändert sich die Farbe. Und die Knoten werden für jede Jahreszeit erstellt. Etwas in dieser Richtung.

So ist es möglich, die

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); });

mit der Farbe basierend auf einem Wert in der JSON-Datei ausführen? Ich denke nur an eine if-Aussage, aber gibt es einen einfacheren Weg? Könnte ich einfach den Hex-Farbcode in den JSON einfügen?

Quelle

2012-10-22 lucastimmons

Können Sie mir gerade in diesen Fragen helfen: 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 Könnt ihr mir bitte dabei helfen? – user2213564

Klingt, als ob Sie in diesem Fall die Farbe in den JSON aufnehmen möchten. Sie können es in irgendeiner Weise einschließen, die der Browser erkennt, z. als Name ("weiß") oder hex ("#fff"). Eine vollständige Liste der unterstützten Farbspezifikationen finden Sie unter SVG spec.

Quelle

2012-10-22 09:27:55

Danke. Das habe ich mir gedacht. Basierend auf dem, was ich mache, wird das perfekt funktionieren. .style ("fill", Funktion (d) {return d.color;}) zieht nun eine Farbe aus der .json-Datei, die jedem Knoten zugeordnet ist. – lucastimmons

Alternativ könnten Sie die Farben explizit mit einer d3 Ordinalskala, wie in der documentation erwähnt, der Abteilung zuordnen. Siehe Colorbrewer unten.

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

und dann

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

Quelle

2012-10-22 14:05:53 imrane

Danke dafür. Ich habe es zum Laufen gebracht, aber basierend auf dem, was ich mache, ist es leichter, Farben von Json zu ziehen. Aber das wird in Zukunft sehr, sehr hilfreich sein. – lucastimmons

ersetzen const color = d3.scaleOrdinal(d3.schemeCategory20); mit:

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

und bleiben Sie mit:

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

Quelle

2017-07-23 14:44:22

d3.js Sankey-Diagramm: Rechtecke füllen Farbe

Antwort

Verwandte Themen