Силовой макет установить фиксированное расстояние на каждом узле даже после перетаскивания

Я искал, но не достиг этого, возможно ли, что при создании каждого узла должно быть зафиксировано расстояние каждого узла даже после перетаскивания.Силовой макет установить фиксированное расстояние на каждом узле даже после перетаскивания

пожалуйста, проверьте этот код

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 + ")"; }); 
    });

источник

2016-10-20 Subrata

Что мне удается установить Исходное положение, когда документ инициализируется этой 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"} ] } Но когда draging он действует свое поведение по умолчанию, я хочу установить каждую позицию узла в исходное положение (х, у) после дражирования в любом месте. Любые советы помогут. Спасибо – Subrata

Я не понимаю, что вы пытаетесь сделать. Если вы перетащите узел, вы перетащите его из других узлов, т. Е. Перетащите один узел. Если вы хотите, чтобы расстояние было одинаковым, вы фактически перетаскиваете все узлы одновременно? Не могли бы вы объяснить, что вам нужно немного подробнее? – thatOneGuy

да, мне удалось получить каждый узел в его начальную позицию x, y. Теперь мне нужен эффект подпрыгивания, прежде чем каждый узел будет привязан к его исходному положению. – Subrata

Я могу прикреплен к каждому узлу в исходное положение. Вот рабочий пример, но здесь отсутствует эффект подпрыгивания, который еще не достигнут.

<!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>

источник

2016-10-20 09:38:23 Subrata

Есть ли способ дать эффект подпрыгивания выше узлов? – Subrata

Силовой макет установить фиксированное расстояние на каждом узле даже после перетаскивания

ответ

Смежные вопросы