D3.js强制有向图，每组不同颜色？ [英] D3.js force directed graph, each group different color?

问题描述

我使用d3.js插件制作了一个强制定向图，我想根据他们所属的组对不同颜色的节点和标签进行着色。

我添加了颜色的比例：

  var color = d3.scale.category20 
  

和我添加的节点变量：

  .style（fill，function（d）{return color（d.group）;}）
   
 
 
这是我目前的情况： http://jsfiddle.net/WBkw9/  
 
 
 
完整指令码：
  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 = {}; 
 
 //从链接中计算不同的节点。 
 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高度）; 
 
 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）
 .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）{returntranslate（+ 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）; 
} 
  
我在每个组上的不同颜色缺少什么？
解决方案
您的问题是 group 没有为您的数据定义。因此，所有的节点都为未定义组着色。您的圈子是为 force.nodes（）中的数据定义的，它们具有属性 index   name   px   >  x 和 y 。  group 仅定义为从未应用过颜色的链接。
 
 
 
也不是一个明确的方式来确定一个节点应该是什么颜色。如果多个链接连接到一个节点，并且这些链接在不同的组中，会发生什么？
 
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?
解决方案
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?

                        
这篇关于D3.js强制有向图，每组不同颜色？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！