CODEWITHSUNDEEP
d3.jsforce-layout
TheDimLebowski
TheDimLebowski

Reputation: 474

d3js (v4) canvas force layout with text on nodes

I have a pretty basic question. I am trying to reproduce https://bl.ocks.org/mbostock/ad70335eeef6d167bc36fd3c04378048 but I simply want to add some text on each node. I could do this with svg but I would like to use the canvas version for efficient rendering.

Thanks a lot.

Upvotes: 5

Views: 1762

Answers (1)

TheDimLebowski
TheDimLebowski

Reputation: 474

The answer is to modify the drawNode function as follows:

function drawNode(d) {
  context.moveTo(d.x + 3, d.y);
  context.arc(d.x, d.y, 5, 0, 2 * Math.PI);
  context.fillText(d.name, d.x+10, d.y+3);
}

context.fillText() allows to add text on a canvas.

Upvotes: 5

Related Questions