如何为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>