D3.js force directed graph, each group different color?
colors, d3.js, force-layout, nodes
Solution
Your problem is that `group` is not defined for your data. As a result, all of your nodes are colored for group 'undefined'. Your circles are defined for the data in `force.nodes()`, which have the attributes `index` `name` `px` `py` `weight` `x` and `y`. `group` is only defined for the links, which never have color applied to them.
As it currently stands, there also isn't a clear way to determine what color a node should be. What happens if more than one link connects to a node, and these links are in different groups?
Problem
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. I've added scale for color: ``` var color = d3.scale.category20(); ``` and to node variable I've added: ``` .style("fill", function(d) { return color(d.group); }) ``` but all nodes are in the same color.. Here is my current situation: http://jsfiddle.net/WBkw9/ full script: ``` 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); } ``` what am I missing for different color on each group?