javascript - 使用 d3.js 在 svg 路径元素上绘制文本

Question

我正在尝试修改此force directed graph ，特别是我想做的是在每个图形边缘上绘制文本。我尝试了以下方法:

  // add new links
  path.enter().append('svg:path')
    .attr('class', 'link')
    .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();
    })
    .append('svg:text').attr('x', 0).attr('y', 4)
    .attr('class', 'id').text(function(d) { console.log(d.id); return d.id; })

只有最后一行是我修改的。我还向 link 对象添加了一个 id 属性，因此我正在使用的代码并不完全是我链接到的代码。日志语句按预期打印，但没有出现文本或错误消息。如何在每个链接中间附加文本？

Answer 1

您将需要使用 svg 组 <g> ，这将允许您在其中添加元素。

var new_paths = path.enter().append('g'),
    links = new_paths.append('svg:path').attr('class', 'link');

可以自由地将任何样式或行为添加到 links如你所愿。然后，对于标签，您将再次追加到组中:

var labels = new_paths.append('svg:text').attr('class', 'label');

同样，您可以添加任何您想要的内容到 labels .

定义力时，您需要选择链接和标签，如下所示:

force.on("tick", function() {
    links.attr("x1", function(d) { return d.source.x; })
        .attr("y1", function(d) { return d.source.y; })
        .attr("x2", function(d) { return d.target.x; })
        .attr("y2", function(d) { return d.target.y; });

    labels.attr("transform",function(d){
        return
        "translate("+
            (0.5*(d.source.x+d.target.x))+
        ","+
            (0.5*(d.source.y+d.target.y))+
        ")";
    });
});

这是一个演示 fiddle http://jsfiddle.net/k2oyef30/

更新

抱歉，我之前没有按照您的示例操作。这是您的特定解决方案。

更改路径定义为:

// handles to link and node element groups
var path = svg.append('svg:g').selectAll('.path'),
    circle = svg.append('svg:g').selectAll('g');

内部function tick() {您必须选择.links或.id

path.select('.link').attr('d', function(d) {

并管理新元素:

path.select('.id').attr("transform",function(d){
    return "translate("+
        (0.5*(d.source.x+d.target.x))+
    ","+
        (0.5*(d.source.y+d.target.y))+
    ")";
});

内部function restart() {你必须创建一个 <g>元素，例如类 path ，并将元素附加到其中。

// add new links
var newPaths = path.enter().append('svg:g').attr('class','path');

newPaths.append('svg:path')
    .attr('class', 'link')
    .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();
    });

newPaths.append('svg:text').attr('x', 0).attr('y', 4)
    .attr('class', 'id').text(function(d) { return d.id; });

示例定义的问题是它已经选择了 <path>元素使您无法选择新的 <g class="path">