2

我正在使用 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();
}

节点不是根据它们是否是中心的、相关的或两者都没有被着色,它似乎是随意地给它们着色,有时一次全部变成红色或全部变成灰色。然而,半径完美地工作,所以我知道动态属性(中心,相关)设置正确并且被函数识别。我错过了什么?

4

0 回答 0