2016-03-27 3 views
0

Я ищу, чтобы сделать цвет ссылки таким же, как цвет заполнения узла в диаграммах d3 sankey.d3.js sankey link color

Я использую следующую функцию, чтобы получить Цвет узла

function getNodeColor(d){ 
      console.log(d3.rgb(d.color).darker(2)); 
      return d3.rgb(d.color).darker(2); 
} 

Ниже мой код для покраски цвета текста ссылки

// add in the title for the nodes 
    node.append("text") 
     .attr("x", -6) 
     .attr("y", function(d) { return d.dy/2; }) 
     .attr("dy", ".35em") 
     .attr("text-anchor", "end") 
     .attr("transform", null) 
     .text(function(d) { return d.name; }) 
     .filter(function(d) { return d.x < width/2; }) 
     .attr("x", 6 + sankey.nodeWidth()) 
     .attr("text-anchor", "start") 
     .style("stroke", getNodeColor); 

Выше работает прекрасно и текст отображает узел текст с цветом узла. же это не так, когда я пытаюсь изменить значение обводки в определении связи по таким же образом:

var link = svg.append("g").selectAll(".link") 
     .data(graph.links) 
     .enter().append("path") 
     .attr("class", "link") 
     .attr("d", path) 
     .style("stroke-width", function(d) { return Math.max(1, d.dy); }) 
     .style("stroke", getNodeColor) 
     .sort(function(a, b) { return b.dy - a.dy; }); 

Я новичок в d3 санки и следовать http://bl.ocks.org/d3noob/c9b90689c1438f57d649

Помощь оценил ...

BottomLine : Я ищу, чтобы цвета ссылок/аккордов диаграммы sankey были такими же, как цвет прямоугольного заливки ...

ответ

2

Вы можете использовать следующий код, чтобы использовать цвет источника для ссылок на вашем графике. Вы также можете использовать target.color, если вы предпочитаете использовать цвет целевого узла.

svg.selectAll(".link") 
    .style('stroke', function(d){ 
    return d.source.color; 
    }) 

Этот код необходимо разместить после кода, который устанавливает цвета узла.

+1

удалось достичь градиента с помощью http://jsfiddle.net/CeAZQ/3/, спасибо! – Arun

Смежные вопросы