D3 强制布局中的颜色节点

【问题标题】：Colour nodes in D3 force layoutD3 强制布局中的颜色节点
【发布时间】：2017-10-08 08:33:13
【问题描述】：

我是一名 D3 菜鸟，正在寻求有关如何在 D3 Force 布局中为命名节点着色的帮助。在下面的代码中，节点数定义为200，子类首先命名为"p"和"o"。然后makeData函数生成200个节点，随机分配给"p"或"o"。

var colors = {p: "#99CC00", o: "steelblue"},
  radius = 7,
  node_count = 200,
  classes = "a".split(""),
  sub_classes = "po".split("");

function makeData(){
  var out = [];
  for (var i = 0; i < node_count; i++){
    out.push({
      id: i,
      class: classes[jz.num.randBetween(0, classes.length - 1)],
      sub_class: sub_classes[jz.num.randBetween(0, sub_classes.length - 1)]
    });
  }
  return out;
}

我想更改随机分配网络。在makeData 函数中，我想将 20% 的节点设为 "p" 子类，将 80% 的节点设为 "o" 子类。我该怎么办？

【问题讨论】：

标签： javascript d3.js

【解决方案1】：

您可以使用Math.random()，根据预定义的机会创建自己的函数以返回0 或1。有一些聪明的方法可以做到这一点，但在这里我编写一个详细的函数只是为了更具指导性。

函数可以是这样的：

function myRandomNumber(lim) {
  var random = Math.random();
  if (random < lim) {
    return 0
  } else {
    return 1
  }
}

其中参数是Math.random() 的结果的极限，从 0 到 1（方便地说，0 是 0%，1 是 100%）。

所以，在你的情况下，你可以这样称呼它：

sub_class: sub_classes[myRandomNumber(0.2)];

这是一个基本的demo，调用函数100次：

var sub_classes = ["p", "o"];

function myRandomNumber(lim) {
  var random = Math.random();
  if (random < lim) {
    return 0
  } else {
    return 1
  }
}

var counter = {
  p: 0,
  o: 0
}

for (var i = 0; i < 100; i++) {
  counter[sub_classes[myRandomNumber(0.2)]]++
}

console.log(counter)

【讨论】：