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

Question

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

在我的 JSON 文件中，节点表示如下：

 {"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”节点应该是蓝色的，而“组 2”节点应该是橙色的。对于大多数图表来说，这很好，但对于某些图表，颜色会被切换。有什么办法可以让颜色与组一致吗？

这是我构建节点时的代码：

//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 中所述，如果您不设置域...

将通过为传递给刻度的每个唯一值分配范围内的新值，从使用中隐式推断域

但是，如您所见，比例尺以先到先得的方式分配颜色。这就是为什么您有时会看到颜色反转的原因。

让我们证明这一点。

这是一个简单的演示。前 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>