Question

我已经阅读了Web上的文档和示例，但是仍然不明白它是如何工作的。

这是一个最小的工作示例：this code，正在加载here可用的文件graph.json。但是，我想提供的是节点和链接上的标签名称，例如this。

我的代码的这些部分允许在svg容器中创建title和text字段，但是它们不会显示在浏览器中（我所能做的就是使它们出现在Chrome调试工具中，在<node>标记中）。

var nodeText = svg.selectAll("text")
      .data(graph.nodes)
      .enter()
      .append("text");

   var nodeTextLabels = nodeText
      .attr("x", function(d) { return d.source.x; })
      .attr("y", function(d) { return d.source.y; })
      .text( function(d) { return d.degree; })
      .attr("font-size", "10px")
      .attr("font-family", "sans-serif")
      .attr("fill", "red");

非常感谢！

编辑

您的链接有助于极大地了解我当前遇到的麻烦。但是，这并不能完全解决这个问题；

我已编辑代码并更改了以下节点的定义：

  var node = svg.selectAll('.node')
      .data(nodes)
      .enter()
      .append('g')
      .attr('class', 'node')
      .call(d3.drag()
         .on('start', dragstarted)
         .on('drag',  dragged)
      )
      .on('click', connectedNodes);

   node.append('circle')
      .style('fill', function(d) {return color(d.degree); })
      .attr('r', 15);

   node.append('text')
      .attr('dx', 12)
      .attr('dy', '0.35em')
      .style('fill', function(d) { return '#000000'; })
      .text(function(d) { return d.katz; });

实际上，铬调试工具反映出已创建容器g并托管<text>和<node>的容器：

<g class="node" cx="424.97945672750336" cy="398.54468486098466">
  <circle style="fill: rgb(31, 119, 180);" r="15"></circle>
  <text dx="12" dy="0.35em" style="fill: rgb(0, 0, 0);">0.13</text>
</g>

但是，圆并没有加载到节点位置，而是全部卡在了容器like this的左上方

如何在节点处保持圆的位置？（仍然没有显示文字：/）。

非常感谢您的帮助（我不是Web开发人员，具有更多的sysadmin背景：/但仍然需要提供图表）

d3js v4：向节点和链接添加标签

0 个答案: