d3js（v4）キャンバスはノード上のテキストでレイアウトを強制します

Question

私はかなり基本的な質問があります。 https://bl.ocks.org/mbostock/ad70335eeef6d167bc36fd3c04378048を再現しようとしていますが、各ノードにテキストを追加したいだけです。 私はsvgでこれを行うことができましたが、効率的なレンダリングのためにキャンバスバージョンを使用したいと思います。

ありがとうございます。

Answer 1

答えは次のようにdrawNode機能を変更することです：

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()は、キャンバスの上にテキストを追加することができます。