Flexible d3.svg.diagonal - use it!

CSS

circle {
    fill: orange;
    stroke: #333;
}
path {
    fill: none;
    stroke: gray;
    stroke-width: 2;
}

text {
    fill: firebrick;
    font-weight: bold;
}

JavaScript

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

var diagonal = d3.svg.diagonal();

var source = {x: 300, y: 50};

var targets = [
    {x: 100, y: 150}, 
    {x: 200, y: 150}, 
    {x: 300, y: 150}, 
    {x: 400, y: 150}, 
    {x: 500, y: 150}
];

// create the link pairs
var links = targets.map(function (target) {
    return {source: source, target: target};
});

// use the diagonal generator to take our links and 
// create the curved paths to connect our nodes
var link = svg.selectAll('path')
    .data(links)
  .enter()
  .append('path')
    .attr('d', line);

// add all the nodes!
var nodes = targets.concat(source);

svg.selectAll('circle')
    .data(nodes)
  .enter()
  .append('circle')
    .attr({
        r: 20,
        cx: function (d) {return d.x;},
        cy: function (d) {return d.y;}
    });

svg.selectAll('text')
    .data(nodes)
  .enter()
  .append('text')
    .attr({
        dx: "-3mm",
        dy: "1.5mm",
        x: function (d) {return d.x;},
        y: function (d) {return d.y;}
    })
    .text(function(d) {return d.x;});