Изменить цвета узлов в d3 Sankey Diagram на основе дополнительного столбца в данных

Question

Я создаю диаграмму Санки с помощью плагина D3 Sankey. У меня есть стандартные столбцы: источник, цель, значение плюс еще один столбец с именем nodeColor. Я хотел бы, чтобы цвет целевого узла определялся цветом, отмеченным в столбце «nodeColorTarget». Я смог изменить исходный код для всех узлов одного цвета. Однако мне не удалось создать функцию для использования дополнительного столбца, чтобы диктовать цвет.

Образец данных:

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 

Существующий код:

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

Мой полный код here.

Answer 1

Сначала нужно добавить атрибут подобного:

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

Тогда вы можете назвать это так:

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

Смотрите этот пример: http://plnkr.co/edit/4xPx05PxnWxoQBhIj2lo?p=preview

PS: Я сделал некоторые незначительные изменения по мере изменения структуры данных данных