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

Question

我正在尝试为力网络图中的特定组分配特定颜色。这样一来，在我所有的图表中，这些组都被一致地分配了相同的颜色。组名为“a”、“b”、“c”、“d”，并按照当前顺序分配颜色。

例如，我想要的是始终将“a”分配给蓝色，而“b”始终分配给红色。

我用于节点着色的 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)先到先得。这意味着，如果您不设置域，

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

我们可以很容易地证明这一点。看看这个演示，我在其中使用了两个色标:

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>