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

Question

我正在尝试修改此力导向图 ，特别是我想做的是在每个图的边缘绘制文本。 我尝试了以下方法：

  // 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属性，因此正在使用的代码与link对象不完全相同。 日志语句按预期打印，但是没有文本或错误消息出现。 如何在每个link的中间附加文字？

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))+
        ")";
    });
});

这是一个演示小提琴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>元素，例如，使用class 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">