javascript - D3.js return color() 似乎是随机的？

Question

所以我一直在使用D3.js 制作来自Facebook 网络的展示信息，网络中的 Node 代表组中的不同人。我最近开始处理中心性问题，并希望一些 Node 的颜色不同，以便它们能够脱颖而出。

在我的 JSON 文件中， Node 表示为:

 {"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}],

“第 1 组” Node 应该是蓝色的，而“第 2 组” Node 应该是橙色的。对于大多数图表来说，这很好，但对于某些图表，颜色会发生变化。有什么方法可以让颜色与组保持一致？

这是我构建 Node 时的代码:

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

哦还有色标:

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

这是所有网络的样子:

但其中一些最终是这样的:

如果您需要完整代码或更多示例，请访问:https://github.com/AnimNations/Biomed-Research-Undergrad

Answer 1

这里的问题是您没有定义色标的域。

与任何序数标度一样，您的序数色标无需定义域即可工作(这很清楚，因为您的代码没有中断)。如 API 中所述, 如果你不设置域...

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

但是，如您所见，比例尺按照先到先得的原则分配颜色。这就是为什么您有时会看到颜色颠倒的原因。

让我们展示一下。

这是一个简单的演示。前 3 个圆圈来自“a”组，而后 3 个圆圈来自“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>

如您所见，我们有蓝色的“a”圆圈和橙色的“b”圆圈。

但是如果第一个圈子来自“b”组会怎样呢？

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>

如您所见，蓝色现在分配给“b”，橙色分配给“a”。颜色颠倒了。

解决方案:设置域:

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

现在数据中元素的顺序不再重要:对于任何数据集，“a”将为蓝色，“b”将为橙色。

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>