title: How to change the colors of nodes in force directed graph in d3js using javascript?
body: <p>Current Behavior: All the nodes are in random colors.</p>
  
  <p>Expected Behavior: All the parent nodes should be in same colors(blue for example) and all the child nodes should in same colors(light blue).</p>
  
  <p>How to achieve this ?</p>
  
  <p>Here is the working jsfiddle: <a href="https://jsfiddle.net/vivekhegde99/fux0wLdm/1/" rel="nofollow noreferrer">Fiddle</a></p>
  
  <pre><code>  var color = d3.scaleOrdinal(d3.schemeCategory10);
  
  grads = svg.append("defs").selectAll("radialGradient")
      .data(graph.nodes)
      .enter()
      .append("radialGradient")
      .attr("gradientUnits", "objectBoundingBox")
      .attr("cx", 0)
      .attr("fill", function(d) { return color(d.id); })
      .attr("cy", 0)
      .attr("r", "100%")
      .attr("id", function(d, i) { return "grad" + i; });
  
   grads.append("stop")
      .attr("offset", "0%")
      .style("stop-color", "white");
  
   grads.append("stop")
      .attr("offset", "100%")
      .style("stop-color",  function(d) { return color(d.id); });  
  
  nodeElements =  g.append("g")
    .attr("class", "nodes")
    .selectAll("circle")
    .data(graph.nodes)
    .enter().append("circle")
    .attr("r", 60)
  
    .attr("stroke", "#fff")
    .attr('stroke-width', 21)
    .attr("id", function(d) { return d.id })
     //.attr("fill", function(d) {return color(d.id)}) 
       .attr('fill', function(d, i) { return 'url(#grad' + i + ')'; })
  </code></pre>