Question

我已经搜索但没有实现这一点，是否有可能在创建每个节点时，即使在拖动之后也应该有每个节点的固定距离。

请检查此代码

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

Answer 1

我能够将每个节点固定到其初始位置。这是工作示例，但这里缺少尚未实现的弹跳效果。

＆＃13;

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

＆＃13;

强制布局甚至在拖动后设置每个节点的固定距离

1 个答案: