谁能帮我将文本添加到我的 d3 力图？答案

【问题标题】：Can anyone help me to add text to my d3 force graph?谁能帮我将文本添加到我的 d3 力图？
【发布时间】：2018-01-25 04:42:45
【问题描述】：

我正在制作一个 d3 力图，我喜欢在每个节点上发布一些文本。我在互联网上搜索，我只找到了 SVG 解决方案，但在我的代码中，我没有使用 SVG，但我发现你可以使用 d3 事件，比如鼠标悬停，我不明白如何将它放在我的代码中。

有了这个代码结构，谁能帮我解决我的问题？

<body>
  <h1>Graph</h1>
  <canvas id="network" width="1000" height="1000"></canvas>

  <script src="https://d3js.org/d3.v4.min.js"></script>

  <script>
  /* global d3 */
  var canvas = d3.select("#network"),
    width = canvas.attr("width"),
    height = canvas.attr("height"),
    ctx = canvas.node().getContext("2d"),
    r = 10,
    x = d3.scaleOrdinal().range([20,width -20]),
    color = d3.scaleOrdinal(d3.schemeCategory20),
    simulation = d3.forceSimulation()
      .force("x", d3.forceX(width/2))
      .force("y", d3.forceY(height/2))
      .force("collide", d3.forceCollide(r+1))
      .force("charge", d3.forceManyBody()
        .strength(-200))
      .force("link", d3.forceLink()
        .id(function (d) { return d.champion; }));

  d3.json("docs/Champions.json", function (err, graph) {
    if (err) throw err;

    simulation.nodes(graph.nodes);
    simulation.force("link")
      .links(graph.links);
    simulation.on("tick", update);

    canvas
        .call(d3.drag()
            .container(canvas.node())
            .subject(dragsubject)
            .on("start", dragstarted)
            .on("drag", dragged)
            .on("end", dragended));

    function update() {
      ctx.clearRect(0, 0, width, height);

      ctx.beginPath();
      ctx.globalAlpha = 0.5;
      ctx.strokeStyle = "#808080";
      graph.links.forEach(drawLink);
      ctx.stroke();


      ctx.globalAlpha = 1.0;
      graph.nodes.forEach(drawNode);
    }

    function dragsubject() {
      return simulation.find(d3.event.x, d3.event.y);
    }

  });

  function dragstarted() {
    if (!d3.event.active) simulation.alphaTarget(0.3).restart();
    d3.event.subject.fx = d3.event.subject.x;
    d3.event.subject.fy = d3.event.subject.y;
    console.log(d3.event.subject.champion);
  }

  function dragged() {
    d3.event.subject.fx = d3.event.x;
    d3.event.subject.fy = d3.event.y;
  }

  function dragended() {
    if (!d3.event.active) simulation.alphaTarget(0);
    d3.event.subject.fx = null;
    d3.event.subject.fy = null;
  }

  function drawNode(d) {
    ctx.beginPath();
    ctx.fillStyle = color(d.region);
    ctx.moveTo(d.x, d.y);
    ctx.arc(d.x, d.y, r, 0, Math.PI*2);
    ctx.fill();
  }

  function drawLink(l) {
    ctx.moveTo(l.source.x, l.source.y);
    ctx.lineTo(l.target.x, l.target.y);
  }

  </script>

</body>
</html>

我使用的 JSON 文件是这样的

{ "nodes": [
  {"champion":"name", 
  "region":"place"},
   {...}
  ],
  "links": [
  {"source": "...", 
   "target":"..."},
  {...}
]}

【问题讨论】：

标签： javascript jquery html json d3.js

【解决方案1】：

自从有人问这个问题已经有一段时间了，但是由于我也想知道如何实现原始问题中提出的问题，所以记录一下解决方案：

为了从例如添加文本JSON文件的“冠军”字段，添加以下行：

ctx.fillText(d.champion, d.x, d.y);

到函数：

function drawNode(d)

例如：

function drawNode(d) {
   ctx.beginPath();
   ctx.fillStyle = color(d.region);
   ctx.moveTo(d.x, d.y);
   ctx.arc(d.x, d.y, r, 0, Math.PI*2);
   ctx.fill();
   ctx.fillText(d.champion, d.x, d.y);
}

【讨论】：