title: How to add custom colors in D3 nodes of a graph
body: <p><img src="https://i.stack.imgur.com/NFa4d.png" alt="enter image description here"></p>
  
  <p>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 i.e 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 ,,</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
   &lt;head&gt;
  &lt;script type="text/javascript" src="http://mbostock.github.com/d3/d3.js?1.27.1"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="http://mbostock.github.com/d3/d3.geom.js?1.27.1"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="http://mbostock.github.com/d3/d3.layout.js?1.27.1"&gt;&lt;/script&gt;
      &lt;style type="text/css"&gt;
  
   line.link {
    stroke: #ccc;
  }
  
  circle.node {
   fill: #000;
   stroke: #fff;
   stroke-width: 1.5px;
  }
  
      &lt;/style&gt;
    &lt;/head&gt;
    &lt;body&gt;
      &lt;script type="text/javascript"&gt;
  
     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; });
       });
      });
  
      &lt;/script&gt;
    &lt;/body&gt;
   &lt;/html&gt;
  </code></pre>
  
  <p>can anyone help me</p>