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

"group 1" 节点应该是蓝色的，而 "group 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 中所述，如果您不设置域...

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>

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

D3.js return color() seems random?

html

javascript

social-networking

node.js

d3.js