Изменяющиеся цвета узлов в d3 v4 принудительно ориентированный граф на холсте

Question

Я работаю над форсированным графом, используя d3v4 и html canvas. Я успешно получил узлы для динамического обновления, так что, когда вы перетаскиваете узел в центр, он меняет свой внешний вид, как и те, которые непосредственно связаны с ним через ссылки. Однако, хотя я могу успешно изменить размер узла, я не могу изменить цвет. Я подозреваю, что это связано с отсутствием понимания 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();
}

Вместо того, чтобы узлы окрашивались в зависимости от того, являются ли они центральными, связанными или нет, кажется, что они случайным образом окрашивают их, иногда все становятся красными или все серыми одновременно. Однако радиус работает отлично, поэтому я знаю, что динамические свойства (центральные, связанные) установлены правильно и распознаются функцией. Что мне не хватает?