如何为Force Network d3.js中的节点组分配一致的颜色

Question

I am trying to assign a specific colour to a specific group in my force network graph. This is so that the groups are assigned the same colours consistently across all my graphs. The group names are "a", "b", "c", "d" and they are assigned a colour in accordance to their order currently.

What I want, for example, is "a" to consistently be assigned to Blue and "b" always to Red.

The JavaScript I have for the node colouring is below:

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

Any help would be much appreciated,

Thank you

Answer 1

d3.scale.category10() (or d3.schemeCategory10 in v4) works on a first-come, first-served basis. It means that, if you don't set a domain,

the domain will be inferred implicitly from usage by assigning each unique value passed to the scale a new value from the range. ( source )

We can easily show this. Have a look at this demo, where I'm using two color scales:

 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> 

As you can see, the data itself doesn't matter, just the order.

To have a color consistently assigned to a datum value, as you asked, we just need to set the domain:

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

Here is the demo, now the colors are the same for the same datum:

 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>