如何為Force Network d3.js中的節點組分配一致的顏色

Question

我正在嘗試將特定顏色分配給力網絡圖中的特定組。 這樣可以在所有圖形中為組分配相同的顏色。 組名稱是“a”，“b”，“c”，“d”，並且根據它們當前的順序為它們分配顏色。

例如，我想要的是“a”一直被分配給Blue而“b”總是分配給Red。

我用於節點着色的JavaScript如下：

var color = d3.scale.category10();

var node = vis.selectAll(".node")
.data(force.nodes())
.enter().append("g")
.attr("class", "node")
.style("fill", function(d) { return color(d.group); })
.style("opacity", 0.9)
.on("mouseover", mouseover)
.on("mouseout", mouseout)
.call(force.drag);

任何幫助將非常感激，

謝謝

Answer 1

d3.scale.category10() （或v4中的d3.schemeCategory10 ）以先到先得的方式工作。 這意味着，如果您沒有設置域名，

通過將傳遞給比例的每個唯一值分配給該范圍中的新值，將從使用中隱式推斷該域。 （ 來源 ）

我們可以輕松地展示這一點 看看這個演示，我使用兩個色標：

 var data = ["a", "b", "c", "d"]; var color = d3.scale.category10(); var color2 = d3.scale.category10(); var body = d3.select("body") var paragraphs1 = body.selectAll(null) .data(data) .enter() .append("p") .style("background-color", function(d) { return color(d) }) .html(String); body.append("br"); var paragraphs1 = body.selectAll(null) .data(data.reverse()) .enter() .append("p") .style("background-color", function(d) { return color2(d) }) .html(String); 

 p { margin: 0px; } 

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

如您所見，數據本身並不重要，只是順序。

要按照您的要求將顏色一致地分配給基准值，我們只需要設置域：

var color = d3.scale.category10()
    .domain(["a", "b", "c", "d"]);

這是演示，現在相同數據的顏色相同：

 var data = ["a", "b", "c", "d"]; var color = d3.scale.category10() .domain(data); var color2 = d3.scale.category10() .domain(data); var body = d3.select("body") var paragraphs1 = body.selectAll(null) .data(data) .enter() .append("p") .style("background-color", function(d) { return color(d) }) .html(String); body.append("br"); var paragraphs1 = body.selectAll(null) .data(data.reverse()) .enter() .append("p") .style("background-color", function(d) { return color2(d) }) .html(String); 

 p { margin: 0px; } 

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