javascript - 向 d3 行元素添加标题

Question

我现在正在运行的是显示一个根节点和一组通过 d3 line 连接到它的节点元素。我想为该行添加一个标题，因为我已经定义了它并且可以从 d.label 中自由获取它。 (在 JSON 的节点部分)。我正在使用以下代码:

var width = 500,
    height = 500;
var force = d3.layout.force()
    .size([width, height])
    .charge(-800)

    .linkDistance(d => d.distance)

    .on("tick", tick);

var svg = d3.select("#target").append("svg")
    .attr("width", width)
    .attr("height", height)
    .attr("class", "mainsvg");
var link = svg.selectAll(".link"),
    node = svg.selectAll(".node");


d3.json("test.json", function(error, graph) {
  if (error) throw error;

  force
      .nodes(graph.nodes)
      .links(graph.links)
      .start();


  link = link.data(graph.links)
      .enter().append("line")
      .attr("class", "link");


  node = node.data(graph.nodes)
      .enter().append("a")      
    node.append("g")
      .attr("class", "node");    

    node.append("circle")
      .attr("class", "circle")
      .attr("r", function(d) { return d.r })
      .attr("fill", function(d) { return d.color })
      .attr("stroke", function(d){ return d.color });

});

function tick() {

  link.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; });
  svg.selectAll(".circle").attr("cx", function(d) { return d.x; })
      .attr("cy", function(d) { return d.y; });
  svg.selectAll(".text").attr("x", function(d) { return d.x+d.xoffs; })
      .attr("y", function(d) { return d.y+d.yoffs; });

}

现在我尝试使用正常的 <text>附加到 edgepath 的元素以这种方式:

var edgepaths = svg.selectAll(".edgepath")
        .data(graph.links)
        .enter()
        .append('path')
        .attr({'d': function(d) {return 'M '+d.source.x+' '+d.source.y+' L '+ d.target.x +' '+d.target.y},
               'class':'edgepath',
               'fill-opacity':0,
               'stroke-opacity':0,
               'fill':'blue',
               'stroke':'red',
               'id':function(d,i) {return 'edgepath'+i}})
        .style("pointer-events", "none");
var edgelabels = svg.selectAll(".edgelabel")
        .data(graph.links)
        .enter()
        .append('text')
        .style("pointer-events", "none")
        .attr({'class':'edgelabel',
               'id':function(d,i){return 'edgelabel'+i},
               'dx':80,
               'dy':10,
               'font-size':10,
               'fill':'black'});

edgelabels.append('textPath')
        .attr('xlink:href',function(d,i) {return '#edgepath'+i})
        .style("pointer-events", "none")
        .text(function(d){return d.label});

但是，我得到的结果充其量只能说很奇怪。有些标签靠得太近了，有些标签不见了，但所有标签都放错了地方。我如何将它们移动到它们应该在的位置？为了记住一些事情，我正在寻找一种简单的方法来为我已经画出的路径添加标题，没有别的。所以我尝试的方法可能太多了，我不确定。

Answer 1

问题是 edgelabels 中的 dx，它总是一样的:

'dx': 80,

假设您使用带有链接距离的代码(如在您的 last question 中)，解决方案很简单:

'dx':function(d){return d.distance/2},

查看演示:

var nodes = [{
    name: "a"
}, {
    name: "b"
}, {
    name: "c"
}, {
    name: "d"
}, {
    name: "e"
}, {
    name: "f"
}];

var links = [{
    source: 1,
    target: 0,
    distance: 80,
    label: "foo"
}, {
    source: 2,
    target: 0,
    distance: 40,
    label: "bar"
}, {
    source: 3,
    target: 0,
    distance: 180,
    label: "baz"
}, {
    source: 4,
    target: 0,
    distance: 80,
    label: "foobar"
}, {
    source: 5,
    target: 0,
    distance: 90,
    label: "foobaz"
}]

var width = 400
height = 300;

var force = d3.layout.force()
    .nodes(nodes)
    .links(links)
    .size([width, height])
    .linkDistance(d => d.distance)
    .charge(-1000)
    .on("tick", tick)
    .start();

var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height);

var link = svg.selectAll(".link")
    .data(force.links())
    .enter().append("line")
    .attr("stroke", "black")
    .attr("class", "link");

var edgepaths = svg.selectAll(".edgepath")
    .data(force.links())
    .enter()
    .append('path')
    .attr({
        'd': function(d) {
            return 'M ' + d.source.x + ' ' + d.source.y + ' L ' + d.target.x + ' ' + d.target.y
        },
        'class': 'edgepath',
        'fill-opacity': 0,
        'stroke-opacity': 0,
        'fill': 'blue',
        'stroke': 'red',
        'id': function(d, i) {
            return 'edgepath' + i
        }
    })
    .style("pointer-events", "none");

var edgelabels = svg.selectAll(".edgelabel")
    .data(force.links())
    .enter()
    .append('text')
    .style("pointer-events", "none")
    .attr({
        'class': 'edgelabel',
        'id': function(d, i) {
            return 'edgelabel' + i
        },
        'dx': function(d) {
            return d.distance / 2
        },
        'dy': 10,
        'font-size': 12,
        'fill': 'black'
    });

edgelabels.append('textPath')
    .attr('xlink:href', function(d, i) {
        return '#edgepath' + i
    })
    .style("pointer-events", "none")
    .text(function(d) {
        return d.label
    });

var node = svg.selectAll(".node")
    .data(force.nodes())
    .enter().append("g")
    .attr("class", "node")
    .call(force.drag);

node.append("circle")
    .attr("r", (d, i) => i ? 10 : 16)
    .style("fill", (d, i) => i ? "teal" : "brown");

function tick() {



    link.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;
        });

    node.attr("transform", function(d) {
        return "translate(" + d.x + "," + d.y + ")";
    });

    edgepaths.attr('d', function(d) {
        var path = 'M ' + d.source.x + ' ' + d.source.y + ' L ' + d.target.x + ' ' + d.target.y;
        return path
    });



}

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>