Question

Hello im trying to implement this D3 project http://bl.ocks.org/929623:

with images like this one http://bl.ocks.org/950642:

But I can’t make the source images to resize and move along with the nodes. Heres the code:

var nodesCreated = 1;
var newDistance = 100;
var width =  document.documentElement.clientWidth,
    height = document.documentElement.clientHeight,
    fill = d3.scale.category20(),
    nodes = [],
    links = [];

var vis = d3.select("#chart").append("svg")
    .attr("width", width)
    .attr("height", height);

vis.append("rect")
    .attr("width", width)
    .attr("height", height);

var force = d3.layout.force()
    .linkDistance(newDistance)
    .nodes(nodes)
    .links(links)
    .gravity(.01)
    .size([width, height]);

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

vis.selectAll(".node")
      .attr("cx", function(d) { return d.x; })
      .attr("cy", function(d) { return d.y; });


});


var tempX = window.innerWidth/2;
var tempY = window.innerHeight/2;
var point = tempX,tempY,
node = {imgsrc: "https://fbcdn-profile-a.akamaihd.net/hprofile-ak-prn1/48799_806120304_700633127_n.jpg"};
n = nodes.push(node);


vis.on("mousedown", function() {
      var point = d3.mouse(this),
      node = {imgsrc: "https://fbcdn-profile-a.akamaihd.net/hprofile-ak-ash4/211698_100002756979859_374256176_n.jpg"},
      n = nodes.push(node);
      nodesCreated++;
      console.log(nodesCreated);
      var tempCounter = 0;

      newDistance == 10;
      force.linkDistance(newDistance);
      nodes.forEach(function(target) {
          if (/*Math.sqrt(x * x + y * y) < 100 ||*/ tempCounter == 0) {
              links.push({source: node, target: target});
              tempCounter++;
          }
      });

  restart();
});


function restart() {
  force.start();

  vis.selectAll("line.link")
      .data(links)
    .enter().insert("line", ".node")
      .attr("class", "link");

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

      realNode.append("image")
      .attr("xlink:href", function(d) { return d.imgsrc; })
      .attr("x", -8)
      .attr("y", -8)
      .attr("width", 160)
      .attr("height", 160);

}

I have been looking for some help at google but I found no solution.

Answer 1

You should add X and Y co-ordinates to your nodes:

var tempX = window.innerWidth/2;
var tempY = window.innerHeight/2;
var point = [tempX,tempY],
    node = {imgsrc: "https://fbcdn-profile-a.akamaihd.net/hprofile-ak-prn1/48799_806120304_700633127_n.jpg", x: tempX, y: tempY};

and

  var point = d3.mouse(this),
      node = {imgsrc: "https://fbcdn-profile-a.akamaihd.net/hprofile-ak-ash4/211698_100002756979859_374256176_n.jpg", x:point[0], y:point[1]},
      n = nodes.push(node);

And then need to add a transform to the force.on("tick".... function:

 vis.selectAll(".node")
    .attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ") scale(0.30)"; });

This scales your images down to 30%, but you can configure this.

For completeness, here is all of the code:

var nodesCreated = 1;
var newDistance = 100;
var width =  document.documentElement.clientWidth,
    height = document.documentElement.clientHeight,
    fill = d3.scale.category20(),
    nodes = [],
    links = [];

var vis = d3.select("#chart").append("svg")
    .attr("width", width)
    .attr("height", height);

vis.append("rect")
    .attr("width", width)
    .attr("height", height);

var force = d3.layout.force()
    .linkDistance(newDistance)
    .nodes(nodes)
    .links(links)
    .gravity(.01)
    .size([width, height]);

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

 vis.selectAll(".node")
      .attr("cx", function(d) { return d.x; })
      .attr("cy", function(d) { return d.y; });

 vis.selectAll(".node")
    .attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ") scale(0.30)"; });

});


    var tempX = window.innerWidth/2;
    var tempY = window.innerHeight/2;
    var point = [tempX,tempY],
        node = {imgsrc: "https://fbcdn-profile-a.akamaihd.net/hprofile-ak-prn1/48799_806120304_700633127_n.jpg", x: tempX, y:tempY};
    n = nodes.push(node);


vis.on("mousedown", function() {
  var point = d3.mouse(this),
      node = {imgsrc: "https://fbcdn-profile-a.akamaihd.net/hprofile-ak-ash4/211698_100002756979859_374256176_n.jpg", x:point[0], y:point[1]},
      n = nodes.push(node);
      nodesCreated++;
      console.log(nodesCreated);
      var tempCounter = 0;

  newDistance == 10;
  force.linkDistance(newDistance);
  nodes.forEach(function(target) {
    if (/*Math.sqrt(x * x + y * y) < 100 ||*/ tempCounter == 0) {
      links.push({source: node, target: target});
      tempCounter++;
    }
  });

  restart();
});


function restart() {
  force.start();

  vis.selectAll("line.link")
      .data(links)
    .enter().insert("line", ".node")
      .attr("class", "link");

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

      realNode.append("image")
      .attr("xlink:href", function(d) { return d.imgsrc; })
      .attr("x", -8)
      .attr("y", -8)
      .attr("width", 160)
      .attr("height", 160);

}​