How to add custom colors in D3 nodes of a graph

Question

在此输入图像描述

I am using D3 api for a graph where a couple of nodes are forming from a parent node i want to color the nodes of the whole graph in a manner that each parent node has a fixed color and the child nodes has different color ie a root node always have red color and the left child is blue and the right one is green and if only one child is there it is green .I am using this 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>

can anyone help me

Answer 1

SVG has its own CSS properties, one of which being fill . It sets the fill color of an SVG element.

Here is how you use it with 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);

Here the color value ( #1f77b4 ) will be the same for all nodes. If you want to color your nodes with a specific algorithm, D3 ships with predefined categorical color scales .

Edit: Here is a related SO question . One of its answers has a good custom ordinal color scale example .

How to add custom colors in D3 nodes of a graph

Question

1 answers

solution1
4 ACCPTED 2013-12-08 03:43:53

How to add custom colors in D3 nodes of a graph

Question

1 answers

solution1 4 ACCPTED 2013-12-08 03:43:53

solution1
4 ACCPTED 2013-12-08 03:43:53