Modifying the layout created by d3.layout.force()

Question

I used d3.layout.force() to draw a force layout graph since there is no layout available for Directed Acrylic Graph (DAG). The code is at the end of this post.

1. How I can modify the node positions to draw as shown in the picture? (the diagram after the red arrow)?

A final layout should like this below:

2. Should I be using d3.layout.tree() instead of the d3.layout.force() to draw a tree like this?

The code to draw the graph is below:

var width = 640;
var height = 480;

var nodes = [
    { name: 'V' },
    { name: 'A' },
    { name: 'M' },
    { name: 'C' },
    { name: 'A' }
];

var links = [
    { source: 0, target: 1 },
    { source: 0, target: 2 },
    { source: 0, target: 3 },
    { source: 0, target: 4 }
];

var svg = d3.select('body')
    .append('svg')
    .attr('width', width)
    .attr('height', height);

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

force.linkDistance(width / 4);

var link = svg.selectAll('.link')
    .data(links)
    .enter()
    .append('line')
    .attr('class', 'link');

var node = svg.selectAll('.node')
    .data(nodes)
    .enter()
    .append('circle')
    .attr('class', 'node');

force.on('end', function () {

  node.attr('r', width / 50)
      .attr('cx', function(d) { return d.x; })
      .attr('cy', function(d) { return d.y; });

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

force.start();