如何添加自定义颜色以图形的D3节点

enter image description here 如何添加自定义颜色以图形的D3节点

我使用D3的API，其中一对夫妇节点从父节点形成我想要的颜色整个图表中的节点的图方式，每个父节点有一个固定的颜色和子节点有不同的颜色，即一个根节点总是红色，左边的孩子是蓝色的，右边的是绿色，如果只有一个孩子在那里是绿色的。我使用这个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节点

回答

相关问题