0

我正在尝试在 d3 v4 强制布局中的链接上实现标签。尽管我正在遵循b.lock中的代码，但我很难实现标签。我可能在 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));

到这里，代码就OK了。但是当我添加以下代码进行标记时，它停止工作。

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)';
        }
    });
}

请帮忙。谢谢你。

JSON 数据。

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

0 回答 0