JSON-basierte Färbung von Knoten in sankey.js

Question

In Bezug auf D3 Sankey (https://bost.ocks.org/mike/sankey/), wollte ich erkundigen über die Art und Weise, die Knoten mit einer kategorialen Variable in JSON-Datei zu färben.

Link zur JSON-Datei in den eigentlichen Code verwendet wird: https://bost.ocks.org/mike/sankey/energy.json

deshalb Meine Frage ist, dass, wenn ich liefern einige Informationen zur Kategorie der „name“ im Zusammenhang:

{"name":"Solar PV", "category":"A"}, 
{"name":"Solar Thermal","category":"A"}, 
{"name":"Solar","category":"B"}, 
{"name":"Tidal","category":"C"}, 
{"name":"UK land based bioenergy","category":"A"}, 
{"name":"Wave","category":"A"}, 
{"name":"Wind","category":"B"} 

Und was dann Es sollten Änderungen am Quellcode vorgenommen werden, um die Knoten entsprechend der Kategorie zu färben. P.S: Nicht ein Experte in D3/JS, bitte entschuldigen Sie meine begrenzten Fähigkeiten, wenn diese Frage zu naiv erscheint.

Dank

Answer 1

Im verknüpft Beispiel werden Sie diesen Codeblock siehe:

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

die mit .style("fill" Linie ersetzen:

.style("fill", function(d) { return d.color = color(d.category); }) 

Answer 2

In Code Bostock ist, ist dies die Linie das färbt die Rechtecke ein:

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

So ändern Sie einfach das zu:

.style("fill", function(d) { 
    return d.color = color(d.category); 
})