javascript - D3 强制布局中的颜色节点

Question

我是一名 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" 子类。我该怎么办？

Answer 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)];

这是一个基本演示，调用该函数 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)