d3 v4 раскладка с перетаскиванием, масштабированием и меткой - PullRequest
Новая
       48

d3 v4 раскладка с перетаскиванием, масштабированием и меткой

0 голосов
/ 12 мая 2018

Я пытаюсь реализовать ярлыки на ссылках в d3 v4 force layout.Хотя я слежу за кодом из 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));

До сих пор код в порядке.Но когда я добавляю следующий код для маркировки, он перестает работать. 

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"},
.
.
]
}
...