Как добавить пользовательские цвета в D3 узлах графа

enter image description here Как добавить пользовательские цвета в D3 узлах графа

Я использую D3 API для графа, где несколько узлов формования из родительского узла я хочу покрасить узлы всего графика в что каждый родительский узел имеет фиксированный цвет, а дочерние узлы имеют другой цвет, то есть корневой узел всегда имеет красный цвет, а левый - синий, а правый - зеленый, и если только один ребенок есть зеленый. Я использую это апи ,,

<!DOCTYPE html> 
<html> 
<head> 
<script type="text/javascript" src="http://mbostock.github.com/d3/d3.js?1.27.1"></script> 
<script type="text/javascript" src="http://mbostock.github.com/d3/d3.geom.js?1.27.1"></script> 
<script type="text/javascript" src="http://mbostock.github.com/d3/d3.layout.js?1.27.1"></script> 
    <style type="text/css"> 

line.link { 
    stroke: #ccc; 
} 

circle.node { 
fill: #000; 
stroke: #fff; 
stroke-width: 1.5px; 
} 

    </style> 
    </head> 
    <body> 
    <script type="text/javascript"> 

    var w = 960, 
    h = 500, 
    r = d3.scale.sqrt().domain([0, 20000]).range([0, 20]); 

var force = d3.layout.force() 
.gravity(.01) 
.charge(-120) 
.linkDistance(60) 
.size([w, h]); 

var svg = d3.select("body").append("svg:svg") 
.attr("width", w) 
.attr("height", h); 

d3.xml("flare.xml", "application/xml", function(xml) { 
    var nodes = self.nodes = d3.select(xml).selectAll("*")[0], 
    links = self.links = nodes.slice(1).map(function(d) { 
     return {source: d, target: d.parentNode}; 
    }); 

    force 
    .nodes(nodes) 
    .links(links) 
    .start(); 

    var link = svg.selectAll("line.link") 
    .data(links) 
.enter().append("svg:line") 
    .attr("class", "link") 
    .attr("x1", function(d) { return d.source.x; }) 
    .attr("y1", function(d) { return d.source.y; }) 
    .attr("x2", function(d) { return d.target.x; }) 
    .attr("y2", function(d) { return d.target.y; }); 

    var node = svg.selectAll("circle.node") 
    .data(nodes) 
    .enter().append("svg:circle") 
    .attr("class", "node") 
    .attr("cx", function(d) { return d.x; }) 
    .attr("cy", function(d) { return d.y; }) 
    .attr("r", function(d) { return r(d.textContent) || 5; }) 
    .call(force.drag); 

    force.on("tick", function() { 
    nodes[0].x = w/2; 
    nodes[0].y = h/2; 

    link.attr("x1", function(d) { return d.source.x; }) 
    .attr("y1", function(d) { return d.source.y; }) 
    .attr("x2", function(d) { return d.target.x; }) 
    .attr("y2", function(d) { return d.target.y; }); 

     node.attr("cx", function(d) { return d.x; }) 
    .attr("cy", function(d) { return d.y; }); 
    }); 
    }); 

    </script> 
    </body> 
</html>

может кто-нибудь помочь мне

источник

2013-12-08 lucifer

SVG имеет свои собственные свойства CSS, одним из которых является fill. Он устанавливает цвет заливки элемента SVG.

Вот как вы используете его с D3:

var node = svg.selectAll("circle.node") 
    .data(nodes) 
    .enter().append("svg:circle") 
    .style("fill", function (d) { return '#1f77b4'; }) 
    .attr("class", "node") 
    .attr("cx", function(d) { return d.x; }) 
    .attr("cy", function(d) { return d.y; }) 
    .attr("r", function(d) { return r(d.textContent) || 5; }) 
    .call(force.drag);

Здесь значение цвета (#1f77b4) будет одинаковым для всех узлов. Если вы хотите покрасить свои узлы определенным алгоритмом, D3 отправляется с предопределенным categorical color scales.

Редактировать: Вот a related SO question. Один из его ответов has a good custom ordinal color scale example.

источник

2013-12-08 03:43:53

спасибо за ваш ответ, он работает, я получаю все узлы в синем цвете. Если я хочу добавить собственный цвет в узлах, мне нужно будет написать условие? – lucifer

Да. Вы должны решить, как каждый узел будет окрашен, изменив возвращаемое значение в '.style (« fill », function (d) {return '# 1f77b4';})'. Вы можете напрямую поместить цвет в свой XML-файл или отобразить цвета в значения атрибутов, уже находящихся в вашем XML (см. [Пример] (http://stackoverflow.com/questions/13006712/d3js-fill-color/13013162#13013162)). –

Я не могу изменить данные здесь или не могу использовать файл XML. Мне нужно поставить условие, которое будет определять, какой узел является корневым, и который является дочерним. – lucifer

Как добавить пользовательские цвета в D3 узлах графа

ответ

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