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

Posted 2023-02-24

【中文标题】D3.js return color() 似乎是随机的？

【英文标题】：D3.js return color() seems random?

【发布时间】：2017-07-27 15:39:40

【问题描述】：

所以我一直在使用 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

【参考方案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>

【讨论】：

非常感谢！我在图表中的许多其他颜色元素上都有域，但没想到节点也必须有一个。谢谢！