D3.js返回颜色（）似乎是随机的？

Question

So I've been using D3.js to make display information from a Facebook network, and the nodes in the network represent the different people in the group. I recently started dealing with centrality and wanted some nodes to be different in color so that they can stand out.

In my JSON file the nodes are represented as so:

 {"nodes":[{"id":"10066","group":1},{"id":"10072","group":2},{"id":"10075","group":1},{"id":"10077","group":1},{"id":"10093","group":1},{"id":"10114","group":2}],

The "group 1" nodes are supposed to be blue, while the "group 2" nodes are supposed to be orange. For most of the graphs it's fine, but for some graphs the colors are switched. Is there any way to keep the colors consistant with the group?

Here is the code for when I build the nodes:

//sets up the nodes
           var node = svg.append("g")
               .attr("class", "nodes")
               .selectAll("circle")
               .data(graph.nodes)
               .enter().append("circle")
                   .attr("r", 10)
                   .attr("fill", function (d) { return color(d.group); })
                   .call(d3.drag()
                       .on("start", dragstarted)
                       .on("drag", dragged)
                       .on("end", dragended));

Oh and the color scale:

var color = d3.scaleOrdinal(d3.schemeCategory10);

This is what ALL of the networks should look like:

But some of them end up like this:

If you need the entire code, or more examples go to: https://github.com/AnimNations/Biomed-Research-Undergrad

Answer 1

The problem here is that you didn't define the domain of your color scale.

Your ordinal color scale, as any ordinal scale, will work without defining domain (that's clear, since your code didn't break). As explained in the API , if you don't set the domain...

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

However, as you can see, the scale assigns the colors in a first-come, first-served basis. And that's why you are seeing the colors inverted sometimes.

Let's show that.

Here is a simple demo. The first 3 circles are from group "a", while the last 3 are from group "b":

 var svg = d3.select("svg"); var colors = d3.scaleOrdinal(d3.schemeCategory10) var data = [{ group: "a" }, { group: "a" }, { group: "a" }, { group: "b" }, { group: "b" }, { group: "b" }, ] svg.selectAll(null) .data(data) .enter() .append("circle") .attr("cy", 50) .attr("cx", function(d, i) { return 10 + i * 30 }) .attr("r", 10) .attr("fill", function(d) { return colors(d.group) }); 

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

As you can see, we have the "a" circles in blue and the "b" circles in orange.

But what happens if the first circle is from "b" group?

 var svg = d3.select("svg"); var colors = d3.scaleOrdinal(d3.schemeCategory10) var data = [{ group: "b" }, { group: "a" }, { group: "a" }, { group: "b" }, { group: "b" }, { group: "b" }, ] svg.selectAll(null) .data(data) .enter() .append("circle") .attr("cy", 50) .attr("cx", function(d, i) { return 10 + i * 30 }) .attr("r", 10) .attr("fill", function(d) { return colors(d.group) }); 

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

As you can see, blue is now assigned to "b" and orange to "a". The colors are inverted.

Solution : set the domain:

var colors = d3.scaleOrdinal(d3.schemeCategory10)
    .domain(["a", "b"])

Now the order of the elements in the data doesn't matter anymore: "a" will be blue and "b" will be orange, for any data set.

 var svg = d3.select("svg"); var colors = d3.scaleOrdinal(d3.schemeCategory10) .domain(["a", "b"]) var data = [{ group: "b" }, { group: "a" }, { group: "a" }, { group: "b" }, { group: "b" }, { group: "b" }, ] svg.selectAll(null) .data(data) .enter() .append("circle") .attr("cy", 50) .attr("cx", function(d, i) { return 10 + i * 30 }) .attr("r", 10) .attr("fill", function(d) { return colors(d.group) }); 

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