Ändern der Knotenfarben in d3 Sankey-Diagramm basierend auf einer zusätzlichen Spalte in den Daten

Question

Ich erstelle ein Sankey-Diagramm mit dem D3 Sankey-Plugin. Ich habe die Standardspalten: Quelle, Ziel, Wert plus eine zusätzliche Spalte namens nodeColor. Ich möchte, dass die Farbe des Zielknotens von der in der Spalte "nodeColorTarget" angegebenen Farbe bestimmt wird. Ich konnte den Quellcode ändern, damit die Knoten alle eine Farbe haben. Ich war jedoch nicht in der Lage, eine Funktion zu entwickeln, um die zusätzliche Spalte zum Vorgeben der Farbe zu verwenden.

Beispieldaten:

source,target,value,nodeColorTarget 
Dist A,Place1,1,red 
DistB,Place1,5,red 
DistB,Place2,2,grey 
DistB,Place2,1,grey 
DistB,Place3,2,blue 

Bestehende Code:

// add the rectangles for the nodes 
    node.append("rect") 
     .attr("height", function(d) { return d.dy; }) 
     .attr("width", sankey.nodeWidth()) 
     .style("fill", "red") 
     //.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); }); 

Mein vollständiger Code ist here.

Answer 1

Als erstes müssen Sie das Attribut wie das hinzuzufügen:

graph.nodes.push({ "name": d.source, "color": d.nodeColorTarget }); 

Dann können Sie es so nennen:

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

dieses Beispiel Siehe: http://plnkr.co/edit/4xPx05PxnWxoQBhIj2lo?p=preview

PS: ich einige tat kleinere Änderungen als die Struktur der Daten geändert