title: D3.js force directed graph, each group different color?
body: <p>I've made a force directed graph with d3.js plugin, and I wanna color the nodes and the labels with the different color according to group which they belong.</p>
  
  <p>I've added scale for color:</p>
  
  <pre><code>var color = d3.scale.category20();
  </code></pre>
  
  <p>and to node variable I've added:</p>
  
  <pre><code>.style("fill", function(d) { return color(d.group); })
  </code></pre>
  
  <p>but all nodes are in the same color..</p>
  
  <p>Here is my current situation: <a href="http://jsfiddle.net/WBkw9/" rel="noreferrer">http://jsfiddle.net/WBkw9/</a></p>
  
  <p>full script:</p>
  
  <pre><code>var links = [
    {source: "John", target: "Mike", group: "5"},
    {source: "John", target: "Janice", group: "5"},
    {source: "John", target: "Caleb", group: "5"},
    {source: "John", target: "Anna", group: "4"},
    {source: "John", target: "Tommy", group: "3"},
    {source: "John", target: "Jack", group: "2"},
    {source: "John", target: "Vilma", group: "1"},
  ];
  
  var nodes = {};
  
  // Compute the distinct nodes from the links.
  links.forEach(function(link) {
    link.source = nodes[link.source] || (nodes[link.source] = {name: link.source});
    link.target = nodes[link.target] || (nodes[link.target] = {name: link.target});
  });
  
  var color = d3.scale.category20();
  
  var width = 960,
      height = 500;
  
  var force = d3.layout.force()
      .nodes(d3.values(nodes))
      .links(links)
      .size([width, height])
      .linkDistance(60)
      .charge(-300)
      .on("tick", tick)
      .start();
  
  var svg = d3.select("body").append("svg")
      .attr("width", width)
      .attr("height", height);
  
  var link = svg.selectAll(".link")
      .data(force.links())
    .enter().append("line")
      .attr("class", "link");
  
  var node = svg.selectAll(".node")
      .data(force.nodes())
    .enter().append("g")
      .attr("class", "node")
      .style("fill", function(d) { return color(d.group); })
      .on("mouseover", mouseover)
      .on("mouseout", mouseout)
      .call(force.drag);
  
  node.append("circle")
      .attr("r", 8);
  
  node.append("text")
      .attr("x", 12)
      .attr("dy", ".35em")
      .text(function(d) { return d.name; });
  
  function tick() {
    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("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; });
  }
  
  function mouseover() {
    d3.select(this).select("circle").transition()
        .duration(750)
        .attr("r", 16);
  }
  
  function mouseout() {
    d3.select(this).select("circle").transition()
        .duration(750)
        .attr("r", 8);
  }
  </code></pre>
  
  <p>what am I missing for different color on each group?</p>