Javascript 画布上d3 v4力有向图中不同的节点颜色

我正在使用d3v4和html画布制作一个力定向图。 我已经成功地让节点动态更新，这样当你将一个节点拖到中心时，它会改变它的外观，通过链接与它直接相关的节点也会改变。 但是，尽管我可以成功更改节点的大小，但我无法更改颜色。我怀疑这是由于缺乏对HTML画布的理解。 以下是我绘制节点的代码：

function drawNode(d) {
  var radius, colour;
  if (d.central) {
    radius = 10;
    colour = "red";
  } else if (d.related) {
    radius = 7;
    colour = "black";
  } else {
    radius = 3;
    colour = "grey";
  }
  context.moveTo(d.x + radius, d.y);
  context.font = "10pt Arial";
  context.fillStyle = "black"; // for the text
  context.fillText(d.name,d.x - 30, d.y - 10);
  context.arc(d.x, d.y, radius, 0, 2 * Math.PI);
  context.strokeStyle = colour;
  context.stroke();
  context.fillStyle = colour;
  context.fill();
}

节点的颜色不是根据它们是否是中心的、相关的或两者都不相关而定，而是随意地给它们上色，有时会一下子变成红色或灰色。但是，半径的工作原理非常完美，因此我知道动态特性（中心、相关）设置正确，并由函数识别。我错过了什么