Question

enter image description here

我正在使用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>

任何人都可以帮助我

Answer 1

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。

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

1 个答案: