Question

如何使用 D3.v4 和画布制作彩色强制定向布局？

我不确定如何为节点着色。

我们可以使用此example作为参考。

在此功能中添加颜色：

var color = d3.scaleOrdinal(d3.schemeCategory10);

function drawNode(d) {
  context.moveTo(d.x + 3, d.y);
  context.arc(d.x, d.y, 3, 0, 2 * Math.PI);
  context.fillStyle = function(d) {
    // d.group is either a 1 or a 2
    return color(d.group)
  }
  context.fill()
}

上面的代码使得图形非常滞后，所以我认为这不是最好的方法。此外，上面的代码将所有节点着色为相同颜色，即使它们位于不同的组中。

您可以找到完整的代码here

编辑：为了清楚起见，我想出于性能原因使用画布。我设法让它与SVG一起使用，但这使得平移和缩放非常慢。

Answer 1

如果没有看到整个应用程序，我无法提供性能。但对于颜色问题，解决方案是：

  context.fillStyle = color(d.group)

Answer 2

解决方案是将context.beginPath()添加到函数中。

最终的功能现在看起来像这样：

function drawNode(d) {
    context.fillStyle = color(d.group);
    context.beginPath();
    context.moveTo(d.x + 3, d.y);
    if(d.group == 1){
        context.arc(d.x, d.y, 17 * Math.log(1.25 * Math.pow(d.winCount, 0.25)) + 3, 0, 2 * Math.PI);
    }else{
        context.arc(d.x, d.y, 3.75 * Math.log(Math.pow(d.winCount, 0.75)) + 4, 0, 2 * Math.PI);
    }
    context.fill();
}

使用D3制作彩色力布局

2 个答案: