How to control the coordinates of the nodes of d3

Question

I have created a d3 force layout, and it works very well. Now I will add a group of data to my graph. I hope I could control the center of my new nodes. For example, supposed the center is (100,100), I hope the new nodes lay out into rectangle area like [(50,50) to (150,150)] as a whole.

detail

var width = 500,
    height = 500;

var nodes = [{id:0, n:'Tom'}, {id:1, n:'Join'}, {id:2, n:'John'}, {id:3, n:'Bob'}, {id:4, n:'4'}, {id:5, n:'5'}, {id:6, n:'6'}];
var links = [{source:0,target:1},{source:0,target:2},{source:0,target:3},{source:0,target:4},{source:0,target:5},{source:1,target:5},{source:1,target:6}];

// init force 
var force = d3.layout.force()
    .charge(-120)
    .linkDistance(120)
    .size([width, height]);
// init svg 
var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height); 
// set tick function
force.on("tick", function () {
    d3.selectAll(".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;
    });

    // controll the coordinates here
    d3.selectAll(".node").attr("transform", function(d){
            if(d.flag == 1){
          d.x = Math.max(50, Math.min(150, d.x));
          d.y = Math.max(50, Math.min(150, d.y));
        }
            return "translate("+d.x+","+d.y+")";
    });



}).on('end', function(){
        svg.selectAll(".node").each(function(d){d.fixed=true;});
});




function setData(ns, ls){
  var update = svg.selectAll(".link").data(ls);
  update.enter().append("line")
      .attr("class", "link")
      .style("stroke-width", 1);
  update.exit().remove();

  update = svg.selectAll(".node").data(ns);
  update.enter().append("g")
      .attr("class", "node")
      .attr("id", function(d){return d.id})
      .call(force.drag)
      .call(function(p){
          p.append("image")
              .attr("class", "nodeimage")
              .attr("width", "30px")
              .attr("height", "30px")
              .attr("x", "-15px")
              .attr("y", "-15px");
          p.append("text")
              .attr("class", "nodetext")
              .attr("dx", "-10px")
              .attr("dy", "20px")
              .style("font-size", "15px")
              .text(function(d){return d.n});
      });
  update.exit().remove();
  update.selectAll(".nodeimage") 
        .each(function() {
         d3.select(this).datum(d3.select(this.parentNode).datum());
        }) 
              .attr("xlink:href", function(d){
                var img;
            if(d.flag == 1){
                img = "http://www.gravatar.com/avatar/1eccef322f0beef11e0e47ed7963189b/?default=&s=80"
            }else{
                img = "http://www.gravatar.com/avatar/a1338368fe0b4f3d301398a79c171987/?default=&s=80";
            }
            return img;
              });
  force.nodes(ns)
      .links(ls)
      .start();
}
//init 
setData(nodes, links);
setTimeout(function(){
        //generate new data and merge to old data
        nodes = nodes.concat(generateNewData());
        setData(nodes, links);
    //how do i control the coordinate of new nodes?
}, 3000);


function generateNewData(){
        var ns = [];
        for(var i = 0; i < 10; i++){
            ns.push({id:i+100,n:'n'+i,flag:1});
    }
    return ns;
}

Here is my demo of jsfiddle:http://jsfiddle.net/cs4xhs7s/4/

The latest demo shows that the nodes can display in the rectangle, however, their coordinates are the same. I hope it is an available force layout.

Check this out http://stackoverflow.com/questions/10392505/fix-node-position-in-d3-force-directed-layout — Cyril Cherian, May 26 '16 at 10:40
Thanks for you quick response,however,that is not i want.I still need the force layout,but i'm not satisfied with the random position.I hope some nodes contrain to a area.Is it possible? — Does, May 26 '16 at 10:49
ok then you can check this out http://bl.ocks.org/mbostock/1129492 — Cyril Cherian, May 26 '16 at 10:50
@Cyril Hi,i have updated my jsfiddle demo.It still does't work very well.Could you help me? — Does, May 28 '16 at 03:02
@williamcage I'm so sorry that my jsfiddle demo doesn't work well. — Does, May 28 '16 at 03:05
@Does You are generating new nodes, but I couldn't see you generating links for the new nodes? — william cage, May 29 '16 at 15:49
I tried generating links for your new nodes but the new nodes are going and sticking at the top left corner — william cage, May 29 '16 at 16:49

score 0 · Accepted Answer · answered May 29 '16 at 17:47

https://jsfiddle.net/wpnq15mf/1/

var width = 500,
    height = 500;

var nodes = [{id:0, n:'Tom'}, {id:1, n:'Join'}, {id:2, n:'John'}, {id:3, n:'Bob'}, {id:4, n:'4'}, {id:5, n:'5'}, {id:6, n:'6'}];
var links = [{source:0,target:1},{source:0,target:2},{source:0,target:3},{source:0,target:4},{source:0,target:5},{source:1,target:5},{source:1,target:6}];

// init force 
var force = d3.layout.force()
    .charge(-500)
    .linkDistance(120)
    .gravity(0.1)
    .size([width, height]);
// init svg 
var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height); 
// set tick function
force.on("tick", function () {
    d3.selectAll(".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;
    });
  
    // controll the coordinates here
    d3.selectAll(".node").attr("transform", function(d){
          if(d.flag == 1){
                d.x = Math.max(50, Math.min(150, d.x));
                d.y = Math.max(50, Math.min(150, d.y));
              }
      return "translate("+d.x+","+d.y+")";
    });
    
    
    
}).on('end', function(){
  svg.selectAll(".node").each(function(d){d.fixed=true;});
});




function setData(ns, ls){
  var update = svg.selectAll(".link").data(ls);
  update.enter().append("line")
      .attr("class", "link")
      .style("stroke-width", 1);
  update.exit().remove();

  update = svg.selectAll(".node").data(ns);
  update.enter().append("g")
      .attr("class", "node")
      .attr("id", function(d){return d.id})
      .call(force.drag)
      .call(function(p){
          p.append("image")
              .attr("class", "nodeimage")
              .attr("width", "30px")
              .attr("height", "30px")
              .attr("x", "-15px")
              .attr("y", "-15px");
          p.append("text")
              .attr("class", "nodetext")
              .attr("dx", "-10px")
              .attr("dy", "20px")
              .style("font-size", "15px")
              .text(function(d){return d.n});
      });
  update.exit().remove();
  update.selectAll(".nodeimage") 
        .each(function() {
         d3.select(this).datum(d3.select(this.parentNode).datum());
        }) 
              .attr("xlink:href", function(d){
               var img;
            if(d.flagx == 1){
                img = "http://www.gravatar.com/avatar/1eccef322f0beef11e0e47ed7963189b/?default=&s=80"
            }else{
                img = "http://www.gravatar.com/avatar/a1338368fe0b4f3d301398a79c171987/?default=&s=80";
            }
            return img;
              });
  force.nodes(ns)
      .links(ls)
      .start();
}
//init 
setData(nodes, links);
setTimeout(function(){
  //generate new data and merge to old data
  nodes = nodes.concat(generateNewData());
    links = links.concat(generateNewLinks());
  setData(nodes, links);
    //how do i control the coordinate of new nodes?
}, 3000);


function generateNewData(){
  var ns = [];
    ns.push({id:6,n:'n'+i,flag:1, flagx:1});
  for(var i = 1; i < 10; i++){
      ns.push({id:i+6,n:'n'+i, flagx:1});
    }
    return ns;
}

function generateNewLinks(){
  var ns = [];
    ns.push({source:7,target:8});
    ns.push({source:7,target:9});
    ns.push({source:7,target:10});
    ns.push({source:7,target:11});
    ns.push({source:7,target:12});
    ns.push({source:7,target:13});
    ns.push({source:7,target:14});
    ns.push({source:7,target:15});
    ns.push({source:7,target:16});
    return ns;
}

.node {
    stroke: #fff;
    stroke-width: 1.5px;
}
.link {
    stroke: #999;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>

Aha,i will.However,i find that you only control the center node into the rectangle,but it can't make sure the other nodes are all into the rectangle. — Does, May 30 '16 at 03:49

How to control the coordinates of the nodes of d3

1 Answers1