score:1

Accepted answer

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);

}​