為連接的組件着色D3 V3

Question

我正在D3版本3中工作，並且有一個簡單的工作程序可以讀取JSON文件並將其轉換為動畫的鏈接圖。

我想知道是否有一種方法可以對分離的連接組件進行不同的顏色着色，例如，將第一個組件着色為藍色，將另一個組件着色為紅色，從而可以應用於較大的JSON文件。 我對javascript很陌生，但是想知道是否可以使用組ID來確定節點的顏色。 我將示例JSON文件組織如下：

{
"nodes":[
    {"name":"node1","group":1},
    {"name":"node2","group":1},
    {"name":"node3","group":1},
    {"name":"node4","group":3}
],
"links":[
    {"source":2,"target":1,"weight":3},
    {"source":0,"target":2,"weight":3}
]
}

請注意，每個節點都是組（連接的組件）的一部分。

我的index.html如下。

    <!DOCTYPE html>
<meta charset="utf-8">
<script src="https://d3js.org/d3.v3.min.js"></script>
<style>

svg {
    background-color:red;
    width: 100%;
    }

.link {
stroke: #fff;
}

.node text {
stroke:#fff;
fill: aliceblue;
cursor: pointer;
font-family: fantasy;
padding: 10%;
}

.node circle{
stroke:#fff;
stroke-width:3px;
fill:#fff;
padding: 20px;
}

</style>
<body>

<div class="nodeContainer">


<script>

var width = 960,
    height = 500

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

var force = d3.layout.force()
    .gravity(.05)
    .distance(100)
    .charge(-100)
    .size([width, height]);

d3.json("graphFile.json", function(json) {
force
    .nodes(json.nodes)
    .links(json.links)
    .start();

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

var node = svg.selectAll(".node")
    .data(json.nodes)
    .enter().append("g")
    .attr("class", "node")
    .call(force.drag);

node.append("circle")
    .attr("r","20");

node.append("text")
    .attr("dx", 23)
    .attr("dy", ".35em")
    .text(function(d) { return d.name });

force.on("tick", function() {
    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 + ")"; });
});
});

</script>

</div>

任何幫助將不勝感激-謝謝！

Answer 1

以下是根據組為節點着色的幾種方法：

使用預定義的d3 colorScale （ d3原始顏色模式）

 var colorScale = d3.scale.category10().domain(json.nodes.map(function(d) { return d.group; }));

用戶定義的順序色標：

 var colorScale = d3.scale.ordinal().domain([1, 2, 3]).range(["blue", "green", "red"]);

如果組的范圍很大，我建議使用漸變色的線性刻度。 與此類似： http : //bl.ocks.org/jfreyre/b1882159636cc9e1283a

使用上述方法之一並應用於節點：

node.append("circle")
 .attr("r","20")
 .style('fill', function(d) {
    return colorScale(d.group);
 });

這是一個片段：

 var json = { "nodes":[ {"name":"node1","group":1}, {"name":"node2","group":1}, {"name":"node3","group":1}, {"name":"node4","group":3} ], "links":[ {"source":2,"target":1,"weight":3}, {"source":0,"target":2,"weight":3} ] }; var width = 960, height = 500 var svg = d3.select("body").append("svg") .attr("width", width) .attr("height", height); var force = d3.layout.force() .gravity(.05) .distance(100) .charge(-100) .size([width, height]); var colorScale = d3.scale.category10().domain(json.nodes.map(function(d) { return d.group; })); //var colorScale = d3.scale.ordinal().domain([1, 2, 3]).range(["blue", "green", "red"]); force .nodes(json.nodes) .links(json.links) .start(); var link = svg.selectAll(".link") .data(json.links) .enter().append("line") .attr("class", "link") .style("stroke-width", function(d) { return Math.sqrt(d.weight); }); var node = svg.selectAll(".node") .data(json.nodes) .enter().append("g") .attr("class", "node") .call(force.drag); node.append("circle") .attr("r","20") .style('fill', function(d) { return colorScale(d.group); }); node.append("text") .attr("dx", 23) .attr("dy", ".35em") .text(function(d) { return d.name }); force.on("tick", function() { 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(" + dx + "," + dy + ")"; }); });

 svg { background-color:red; width: 100%; } .link { stroke: #fff; } .node text { stroke:#fff; fill: aliceblue; cursor: pointer; font-family: fantasy; padding: 10%; } .node circle{ stroke:#fff; stroke-width:3px; fill:#fff; padding: 20px; }

 <script src="https://d3js.org/d3.v3.min.js"></script> <div class="nodeContainer"> </div>

希望這可以幫助。

為連接的組件着色D3 V3

問題描述

1 個解決方案

解決方案1
1 已采納 2018-06-28 15:29:21

為連接的組件着色D3 V3

問題描述

1 個解決方案

解決方案1 1 已采納 2018-06-28 15:29:21

解決方案1
1 已采納 2018-06-28 15:29:21