D3.js d3 v4带拖动、缩放和边缘标签的强制布局

我尝试在D3V4 force布局中的链接上实现标签。虽然我遵循的代码来自一个，我面临的困难，以实现标签。我可能缺少svg.selectAll和svg.append的一些基础知识

svg = d3.select("#svgdiv").append('svg').attr('width',width).attr('height',height).style("border","1px solid black"),
width = +svg.attr("width"),
height = +svg.attr("height");


svg.append("rect")
    .attr("width", width)
    .attr("height", height)
    .style("fill", "black")
    .style("pointer-events", "all")
    .call(d3.zoom()
      .scaleExtent([1 / 2, 4])
      .on("zoom", zoomed));

g=svg.append("g");

function zoomed() {
  g.attr("transform", d3.event.transform);
}

link = g.append("g")
    .attr("class", "links")
    .selectAll("line")
    .data(graph.edge)
    .enter().append("line")
    .attr("stroke-width", function(d) { return Math.sqrt(d.value); })
    .attr("id",function(d,i) {return 'edge'+i});


node = g.append("g")
    .attr("class", "nodes")
    .selectAll("circle")
    .data(graph.node)
    .enter().append("circle")
    .attr("r", radius)
    .attr("fill", function(d) { return color(d.group); })   
    .on("click", mouseClick(.2))
    .on("dblclick", mouseDblClick)
    .call(d3.drag()
        .on("start", dragstarted)
        .on("drag", dragged)
        .on("end", dragended));

在这里，代码还可以。但是，当我添加以下用于标记的代码时，它停止工作

edgepaths =svg.selectAll(".edgepath")
.data(graph.edge)
.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':'green',
       'stroke':'yellow',
       'id':function(d,i) {return 'edgepath'+i}})
.style("pointer-events", "none");

edgelabels =svg.selectAll(".edgelabel")
.data(graph.edge)
.enter()
.append('text')
.style("pointer-events", "none")
.attr({'class':'edgelabel',
   'id':function(d,i){return 'edgelabel'+i},
   'dx':80,
   'dy':0,
   'font-size':10,
   'fill':'white'});

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

function ticked() {   
    node
        .attr("cx", function(d) { return d.x;})
        .attr("cy", function(d) { return d.y;})     
    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; });


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



    edgelabels.attr('transform',function(d,i){
        if (d.target.x<d.source.x){
            bbox = this.getBBox();
            rx = bbox.x+bbox.width/2;
            ry = bbox.y+bbox.height/2;
            return 'rotate(180 '+rx+' '+ry+')';
        }
        else {
            return 'rotate(0)';
        }
    });
}

---

有什么具体的错误吗？没有错误。图表显示。但是只有一个节点的x，y co-ords放错了位置。您使用的是与b.lock相同的graph.json吗？现在还不清楚您的预期结果是什么我的json是定制的。我将在这里更新它。您有一个输入错误：

.attr（{'class'：'edgelabel'，等等.

应该是

.attrs（{'class'：'edgelabel'，

）。它是

attrs

，而不是

attr

。

{
"edge":[ 
{"source":"source1","target":"target1","value":"1"},
{"source":"source2","target":"target2","value":"0"},
.
.
],
"node":[
{"group":0,"id":"source1"},
{"group":3,"id":"source2"},
.
.
]
}