8

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 = {};

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

各グループの異なる色に欠けているものは何ですか?

4

5 に答える 5

5

あなたの問題はgroup、データに対して定義されていないことです。その結果、すべてのノードがグループ「未定義」に対して色付けされます。のデータに対して円が定義されてforce.nodes()おり、属性index name px py weight xおよびがありますy。group色が適用されていないリンクに対してのみ定義されます。

現在のところ、ノードの色を決定する明確な方法もありません。複数のリンクがノードに接続し、これらのリンクが異なるグループにある場合はどうなりますか?

于 2013-07-24T18:56:04.420 に答える
5

これが私のコードです（http://bl.ocks.org/mbostock/4062045に基づく）。それは完全に機能しています。ここでどのように見えるかを見ることができます: http://jsfiddle.net/Rom2BE/H2PkT/

各グループには異なる色があります。

**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}
]}
于 2014-03-13T15:10:31.440 に答える
2

links@ckersch がすでに指摘したように、グループ情報はオブジェクトでのみ利用できます。オブジェクトにもグループ情報を追加する必要がありますnodes。この例では、16 行目を次のように変更して実行できます。

link.target = nodes[link.target] || (nodes[link.target] = {name: link.target, group: link.group});

しかし、複数の を含むより複雑なデータの場合source、すべてのソースが同じ色になります (または、それで問題ないでしょうか?)。

この Fiddle でその変更を行いました: http://jsfiddle.net/WBkw9/19/。

于 2015-01-06T18:05:17.093 に答える
1

これを解決したことがありますか？可能な解決策がここにない場合: http://jsfiddle.net/adeaver/F2fbu/1/

各グループ/ノードは、次を追加することにより、対応するテキストとともに異なる色に .style("fill", function(d) { return color(d.group); }) なります。テキスト追加およびgroup: link.groupリンクからノードを計算する関数に

于 2013-10-08T20:36:21.987 に答える