使用D3进行有色力的布局

Question

How can I make a colored force directed layout using D3.v4 and canvas ?

I am not sure how to color the nodes.

We can use this example as a reference.

Adding color into this function:

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()
}

The above code makes the graphic really laggy so I am thinking that that is not the best way to do it. Additionally, the above code colors all nodes in same color even if they are in separate groups.

You can find the full code here

Edit: for clarity, I'd like to use canvas for performance reasons. I've managed to get it to work with SVGs but that makes panning and zooming very slow.

Answer 1

I cannot help for the performance without seeing the whole application. But for the color issue, the solution is:

  context.fillStyle = color(d.group)

Answer 2

The solution was to add context.beginPath() to the function.

The final function now looks like this:

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();
}