修改d3.layout.force（）创建的布局

Question

我使用 d3.layout.force（）绘制力布局图，因为定向丙烯图（DAG）没有可用的布局。代码在这篇文章的末尾。

1. 如何修改要绘制的节点位置，如图所示？ （红色箭头后面的图表）？



最终布局应如下所示：



1. 我应该使用 d3.layout.tree（）而不是 d3.layout.force（）来绘制这样的树吗？

绘制图表的代码如下：

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