使用 D3 制作彩色力布局答案

【问题标题】：Using D3 to make a colored force layout使用 D3 制作彩色力布局
【发布时间】：2016-07-06 12:12:27
【问题描述】：

如何使用 D3.v4 和 canvas 制作 colored 强制定向布局？

我不知道如何为节点着色。

我们可以使用这个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 一起使用，但这会使平移和缩放非常慢。

【问题讨论】：

了解 d.group 的示例是什么样的以及如何实现 color 方法会很有帮助。
我已经链接了完整的代码，还添加了解释颜色方法的代码。

标签： javascript d3.js html5-canvas

【解决方案1】：

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

  context.fillStyle = color(d.group)

【讨论】：

【解决方案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();
}

【讨论】：