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;
}

我想更改随机的assignmnet。 在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)