I'm using the amazing D3JS to build a graph. The graph is rendered, but I want my nodes to have each one its size.

The data is of this form :

{source: Antony Hoppkins, target: Woody Allen, value: 3}

Here's the code :

var links = graph.links;

var nodes = {};



links.forEach(function(link) {

  link.source = nodes[link.source] || (nodes[link.source] = {name: link.source});

  link.target = nodes[link.target] || (nodes[link.target] = {name: link.target});

});



var width = 1200,

    height = 1500;



var force = d3.layout.force()

    .nodes(d3.values(nodes))

    .links(links)

    .size([width, height])

    .linkDistance(50)

    .charge(-200)

    .on(tick, tick)

    .start();



var svg = d3.select(#network).append(svg)

    .attr(width, width)

    .attr(height, height);



var link = svg.selectAll(.link)

    .data(force.links())

  .enter().append(line)

    .attr(class, link);



var node = svg.selectAll(.node)

    .data(force.nodes())

  .enter().append(g)

    .attr(class, node)

    .style(stroke-width, function(d) { return (d.value)*5; })

    .on(mouseover, mouseover)

    .on(mouseout, mouseout)

    .call(force.drag);



node.append(circle)

    .attr(r, 5);



node.append(text)

    .attr(x, 12)

    .attr(dy, .35em)

    .text(function(d) { return d.name; });



function tick() {

  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 mouseover() {

  d3.select(this).select(circle).transition()

      .duration(750)

      .attr(r, 10)

      ;

}



function mouseout() {

  d3.select(this).select(circle).transition()

      .duration(750)

      .attr(r, 5)

      ;

}

Any thoughts ?