在力图d3 js上添加标签答案

【问题标题】：Adding labels on force diagram d3 js在力图d3 js上添加标签
【发布时间】：2016-09-06 05:16:59
【问题描述】：

我正在尝试将标签添加到动态创建的力图。这是代码。

这是我添加文本元素的代码的相关部分。

labels = labels.data(links);

labels.exit().remove();

labels.enter()
    .append("text")
    .attr("text-anchor", "middle")
    .attr("x", 0)
    .attr("dy", 16)
    .append("textPath")
    .attr("startOffset", "50%")
    .attr("xlink:href", function(d,i){ return "#id" + i})
    .text("label");

这是我创建的一个演示问题的小提琴。 - https://jsfiddle.net/soorajchn/u49s9sth/

（因为它很大的stackoverflow 不允许我创建那个大小的代码sn-p）

如果我单击添加按钮，将创建一个节点，并且可以通过从一个节点拖动到另一个节点来绘制连接线。要在节点周围移动，请使用 ctrl + 拖动。

我正在尝试添加标签，并且正在添加文本元素。但它总是占用 0 的高度和宽度，并最终出现在屏幕的左上角。我究竟做错了什么？

【问题讨论】：

您希望标签在哪里？
为什么标题Disable an element in select2 on change not working？
我不知道它是如何进入的。可能是最后一个未问问题的标题。还是编辑了。

标签： javascript jquery d3.js

【解决方案1】：

您错过了将 ID 设置为路径元素。试试这个方法。

 path.enter().append('svg:path')
    .attr('class', 'link')
    .attr("id",function(d, i) {
      return "id" + i; //Sets id to the path elements which will be used in textPaths later
    })
    .classed('selected', function(d) {
      return d === selected_link;
    })
    .style('marker-start', function(d) {
      return d.left ? 'url(#start-arrow)' : '';
    })
    .style('marker-end', function(d) {
      return d.right ? 'url(#end-arrow)' : '';
    })
    .on('mousedown', function(d) {
      if (d3.event.ctrlKey) return;

      // select link
      mousedown_link = d;
      if (mousedown_link === selected_link) selected_link = null;
      else selected_link = mousedown_link;
      selected_node = null;
      restart();
    });

更新fiddle

【讨论】：