我将 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>
谁能帮帮我
最佳答案
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 .
关于javascript - 如何在图形的 D3 节点中添加自定义颜色，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/20449512/