如何添加自定義顏色以圖形的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節點

回答

相關問題