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()（或第4版中的d3.schemeCategory10）按照先到先得的原则运作。这意味着，如果您没有设置域名，

通过将传递给比例的每个唯一值分配给该范围中的新值，将从使用中隐式推断该域。（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>

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

1 个答案: