Force-Layout festgelegt festen Abstand jeder Knoten auch nach dem Ziehen

Ich habe gesucht, aber dies nicht erreicht, ist es möglich, dass, wenn alle Knoten erstellt sind sollte es festen Abstand von jedem Knoten auch nach dem Ziehen sein.Force-Layout festgelegt festen Abstand jeder Knoten auch nach dem Ziehen

überprüfen Sie bitte diesen Code

var width = 1280, 
    height = 800 

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


var force = d3.layout.force() 
    .gravity(1) 
    .linkDistance (800) 
    .charge(-100) 
    .size([width, height]); 




var datajson = { 
    "nodes" : [ {"name" : "a", "group" : 2,'x' : 200,'y' : 300} , {"name" : "b", "group" : 1,'x' : 200,'y' : 300}, { "name" : "c", "group" : 1 ,'x' : 200,'y' : 300}, {"name" : "d", "group" : 2,'x' : 200,'y' : 300} ], 
    "links" : [{"source": 0 ,"target" : 1 , "value" : 1},{"source": 0 ,"target" : 3 , "value" : 2},{"source": 2 ,"target" : 3 , "value" : 3}, 
    {"source": 1 ,"target" : 1 , "value" : 4},{"source": 2 ,"target" : 1 , "value" : 5,"distance":3},{"source": 0 ,"target" : 2 , "value" : 5,"distance":30},{"source": 1 ,"target" : 3 , "value" : 5, 'class': 'red',"distance":30} 
    ] 
} 


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




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

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

    node.append("image") 
     .attr("x", -8) 
     .attr("y", -8) 
     .attr("width", 45) 
     .attr("height", 45) 
     .attr("xlink:href", function(d) { 
    var rnd = Math.floor(Math.random() * 64 + 1); 
    var imagePath = 
      "http://www.bigbiz.com/bigbiz/icons/ultimate/Comic/Comic" 
      + rnd.toString() + ".gif"; 

    return imagePath; 
}); 

    node.append("text") 
     .attr("dx", 12) 
     .attr("dy", ".35em") 
     .text(function(d) { return d.name }); 

    force.on("tick", function() { 
    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 + ")"; }); 
    });

Quelle

2016-10-20 Subrata

Was ich verwalten Anfangsposition zu setzen, wenn das Dokument von diesem var datajson = { "nodes" : [ {"name" : "a", "group" : 2, "x":65, "y":43, "fixed":"TRUE"} , {"name" : "b", "group" : 1,"x":465, "y":43, "fixed":"TRUE"}, { "name" : "c", "group" : 1, "x":465, "y":343, "fixed":"TRUE" }, {"name" : "d", "group" : 2,"x":65, "y":343, "fixed":"TRUE"} ] } initialisiert Aber wenn draging sie ihr Standardverhalten handelt, möchte ich jeden Knoten Position Stellung zurück (x, y) nachdem ich irgendwohin gezogen habe. Jeder Rat wird hilfreich sein. Danke – Subrata

Ich verstehe nicht, was Sie versuchen zu tun. Wenn Sie einen Knoten ziehen, ziehen Sie ihn von den anderen Knoten weg, d. H. Ziehen Sie einen einzelnen Knoten. Wenn Sie den Abstand gleich halten wollen, ziehen Sie eigentlich alle Knoten auf einmal? Könnten Sie etwas detaillierter erklären, was Sie wollen? – thatOneGuy

Ja, ich habe es geschafft, jeden Knoten auf seine ursprüngliche x, y-Position zu bringen. Jetzt brauche ich den Bounce-Effekt, bevor jeder Knoten in seine Ausgangsposition gebracht wird. – Subrata

ich in der Lage bin in seine Ausgangsposition zu jedem Knoten festgelegt. Hier ist ein funktionierendes Beispiel, aber hier fehlt der Bounce-Effekt, der noch nicht erreicht ist.

<!DOCTYPE html> 
 
<meta charset="utf-8"> 
 
<style> 
 

 
.link { 
 
    stroke: #dfdfdf; 
 
} 
 

 
.node text { 
 
    pointer-events: none; 
 
    font: 10px sans-serif; 
 
} 
 
.link.red { 
 
    stroke: blue; 
 
} 
 

 
</style> 
 
<body> 
 
<script src="http://d3js.org/d3.v3.min.js"></script> 
 
<script> 
 

 
var width = 1280, 
 
    height = 800 
 

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

 

 
var force = d3.layout.force() 
 
    .gravity(0.15) 
 
    .linkDistance (400) 
 
    .charge(-100) 
 
    .size([width, height]); 
 

 

 

 

 
var node_psoition = [{"x":65, "y":43},{"x":665, "y":43},{"x":465, "y":343},{"x":65, "y":343}] 
 
var datajson = { 
 
    "nodes" : [ {"id":1,"name" : "a", "group" : 2, "x":65, "y":43 , "fixed":"TRUE"} , {"id":2,"name" : "b", "group" : 1,"x":665, "y":43, "fixed":"TRUE"}, { "id":3,"name" : "c", "group" : 1, "x":465, "y":343, "fixed":"TRUE" }, {"id":4,"name" : "d", "group" : 2,"x":65, "y":343, "fixed":"TRUE"} ], 
 
    "links" : [{"source": 0 ,"target" : 1 , "value" : 1},{"source": 0 ,"target" : 3 , "value" : 1},{"source": 2 ,"target" : 3 , "value" : 1}, 
 
    {"source": 2 ,"target" : 1 , "value" : 1} 
 
    ] 
 
} 
 

 

 

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

 

 
var drag = force.drag() 
 
    .on("dragend", dragend); 
 

 

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

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

 
    node.append("image") 
 
     .attr("x", -8) 
 
     .attr("y", -8) 
 
     .attr("width", 45) 
 
     .attr("height", 45) 
 
     .attr("xlink:href", function(d) { 
 
    var rnd = Math.floor(Math.random() * 64 + 1); 
 
    var imagePath = 
 
      "http://www.bigbiz.com/bigbiz/icons/ultimate/Comic/Comic" 
 
      + rnd.toString() + ".gif"; 
 

 
    return imagePath; 
 
}); 
 

 
    node.append("text") 
 
     .attr("dx", 12) 
 
     .attr("dy", ".35em") 
 
     .text(function(d) { return d.name }); 
 

 
    force.on("tick", function() { 
 
    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 + ")"; }); 
 

 
    }); 
 

 
    function dragend(d) { 
 

 
    
 
     force.stop(); 
 
     position = (d.id - 1); 
 
     temp_x = node_psoition[position].x; 
 
     temp_y = node_psoition[position].y; 
 

 
     d.x = d.px = temp_x; 
 
     d.y = d.py = temp_y; 
 
     d.fixed = true; 
 
     force.start(); 
 

 
    
 

 

 
    } 
 

 

 

 
</script>

Quelle

2016-10-20 09:38:23 Subrata

Gibt es eine Möglichkeit, den Knoten über den Knoten einen Bounce-Effekt zu verleihen? – Subrata

Force-Layout festgelegt festen Abstand jeder Knoten auch nach dem Ziehen

Antwort

Verwandte Themen