D3.js force directed graph, each group different color?

前端未结

关注

 5  1400

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

相关标签:

5条回答

迷失自我

2021-01-12 11:47

Did you ever solve this? if not a possible solution is here: http://jsfiddle.net/adeaver/F2fbu/1/

Each group/node is differently colored along with the corresponding text by adding: .style("fill", function(d) { return color(d.group); }) to the text append and group: link.group to the function that computes the nodes from the links

0 讨论(0)
发布评论:

提交评论
- 加载中...
再見小時候

2021-01-12 11:51
I think you need to change the style attribute of the circle, not the g element.
```
node.append("circle").style("fill", function(d) { return color(d.group); })
```
Edit: The group property in the data must also be changed integers, or cast later.
0 讨论(0)
发布评论:

提交评论
- 加载中...
鱼传尺愫

2021-01-12 12:05

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?

0 讨论(0)
发布评论:

提交评论
- 加载中...

Happy的楠姐

2021-01-12 12:06

Here is my code (based on http://bl.ocks.org/mbostock/4062045). It's working perfectly. You can see how it looks like here : http://jsfiddle.net/Rom2BE/H2PkT/

Each group has a different color.

**index.html**

<!DOCTYPE html>
<meta charset="utf-8">
<style>

.node {
  stroke: #fff;
  stroke-width: 1.5px;
}

.link {
  stroke: #999;
  stroke-opacity: .6;
}

</style>
<body>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script>

var width = 650,
    height = 700;

var color = d3.scale.category10();

var force = d3.layout.force()
    .charge(-120)
    .linkDistance(30)
    .size([width, height]);

var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height);

d3.json("data.json", function(error, graph) {
  force
      .nodes(graph.nodes)
      .links(graph.links)
      .start();

  var link = svg.selectAll(".link")
      .data(graph.links)
    .enter().append("line")
      .attr("class", "link")
      .style("stroke-width", function(d) { return Math.sqrt(d.value); });

  // You define here your nodes and the color will be d.group
  var node = svg.selectAll(".node")
      .data(graph.nodes)
    .enter().append("circle")
      .attr("class", "node")
      .attr("r", 5)
      .style("fill", function(d) { return color(d.group); })
      .call(force.drag);

  //Display node name when mouse on a node
  node.append("title")
      .text(function(d) { return d.name; });

  //Where and how nodes are displayed
  force.on("tick", function() {
    node.attr("cx", function(d) { return d.x; })
        .attr("cy", function(d) { return d.y; });

    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; });
  });

  //Legend
  var legend = svg.selectAll(".legend")
      .data(color.domain())
    .enter().append("g")
      .attr("class", "legend")
      .attr("transform", function(d, i) { return "translate(0," + i * 20 + ")"; });

  legend.append("rect")
      .attr("x", width - 18)
      .attr("width", 18)
      .attr("height", 18)
      .style("fill", color);

  legend.append("text")
      .attr("x", width - 24)
      .attr("y", 9)
      .attr("dy", ".35em")
      .style("text-anchor", "end")
      .text(function(d) { return d; });
});

</script>


**data.json**

{"nodes":[
  {"name":"Vertex 5","group":"Virtuals-MacBook-Pro-36095"},{"name":"Vertex 9","group":"Virtuals-MacBook-Pro-36095"},{"name":"Vertex 15","group":"Virtuals-MacBook-Pro-3-53688"},{"name":"Vertex 20","group":"Virtuals-MacBook-Pro-36095"},{"name":"Vertex 26","group":"Virtuals-MacBook-Pro-4-40842"},{"name":"Vertex 29","group":"Virtuals-MacBook-Pro-36095"},{"name":"Vertex 33","group":"Virtuals-MacBook-Pro-36095"},{"name":"Vertex 37","group":"Virtuals-MacBook-Pro-36095"},{"name":"Vertex 49","group":"Virtuals-MacBook-Pro-3-53688"},{"name":"Vertex 52","group":"Virtuals-MacBook-Pro-4-40842"},{"name":"Vertex 53","group":"Virtuals-MacBook-Pro-4-40842"},{"name":"Vertex 58","group":"Virtuals-MacBook-Pro-36095"},{"name":"Vertex 59","group":"Virtuals-MacBook-Pro-4-40842"},{"name":"Vertex 65","group":"Virtuals-MacBook-Pro-4-40842"},{"name":"Vertex 73","group":"Virtuals-MacBook-Pro-4-40842"},{"name":"Vertex 74","group":"Virtuals-MacBook-Pro-36095"},{"name":"Vertex 80","group":"Virtuals-MacBook-Pro-36095"},{"name":"Vertex 84","group":"Virtuals-MacBook-Pro-4-40842"},{"name":"Vertex 87","group":"Virtuals-MacBook-Pro-4-40842"},{"name":"Vertex 99","group":"Virtuals-MacBook-Pro-4-40842"}
],
"links":[
  {"source":5,"value":1,"target":11},{"source":5,"value":1,"target":12},{"source":10,"value":1,"target":12},{"source":11,"value":1,"target":5},{"source":11,"value":1,"target":12},{"source":11,"value":1,"target":14},{"source":12,"value":1,"target":5},{"source":12,"value":1,"target":10},{"source":12,"value":1,"target":11},{"source":14,"value":1,"target":11},{"source":16,"value":1,"target":19},{"source":18,"value":1,"target":19},{"source":19,"value":1,"target":16},{"source":19,"value":1,"target":18}
]}

0 讨论(0)

迷失自我

2021-01-12 12:10
Your group info is only available in the links object, like @ckersch already pointed out. You would need to add the group info to you nodes object too. For this example that can be done by changing line 16 into:
```
link.target = nodes[link.target] || (nodes[link.target] = {name: link.target, group: link.group});
```
But for more complex data, with more than one source, all sources would have the same colour (or would that be OK?).

I made that change in this Fiddle: http://jsfiddle.net/WBkw9/19/.
0 讨论(0)
发布评论:

提交评论
- 加载中...