d3 force layout as line (y coordinate stays the same)

Question

I'm trying to draw what I think amounts to a force graph in d3, but in a single flat line. I would like around 4-5 points of varying size depending on their magnitude, spaced evenly between them (not by center, but the distance between the sides of the circles should be constant), and lines to join them. So in ASCII format, something like:

o---O---o---O

I was trying to avoid a complicated calculation to figure out the center coordinates and start and end of each line, so it seemed like the force layout might do the trick. Unfortunately, when I put it together, I can't seem to get it to work very well. Often times points end up behind other points, so for a 4 node graph like above, it comes out looking something more like:

O---O

Is there any way to get the force layout to work in 1 dimension instead of 2? Or am I stuck doing all of the spacing calculations myself? The code I'm working with is below:

var width = 500;
var height = 200;
var svg = d3.select($el[0])
  .append('svg')
  .attr('width', width)
  .attr('height', height);

var data_nodes = [
  { x: width / 2, y: height / 2, count: 5 },
  { x: width / 2, y: height / 2, count: 0 },
  { x: width / 2, y: height / 2, count: 1 },
  { x: width / 2, y: height / 2, count: 10 },
];

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

var force = d3.layout.force()
  .nodes(data_nodes)
  .links(data_links)
  .linkDistance(150)
  .linkStrength(0.5)
  .gravity(0.7)
  .friction(0.3)
  .size([width, height])
  .charge(-300);

var links = svg.selectAll('line')
  .data(data_links)
  .enter()
  .append('line')
  .attr('stroke', '#65759E')
  .attr('stroke-width', 4)
  .attr('x1', function (d) { return data_nodes[d.source].x; })
  .attr('y1', function (d) { return data_nodes[d.source].y; })
  .attr('x2', function (d) { return data_nodes[d.target].x; })
  .attr('y2', function (d) { return data_nodes[d.target].y; });

var nodes = svg.selectAll('circle')
  .data(data_nodes)
  .enter()
  .append('circle')
  .attr('fill', '#65759E')
  .attr('r', function (d) { return 10 + Math.sqrt(d.count) * 4; })
  .attr('cx', function (d, i) { return d.x + i * 10; })
  .attr('cy', function (d, i) { return d.y; });

force.on('tick', function () {
  nodes.attr('cx', function (d) { return d.x; });
  links.attr('x1', function (d) { return d.source.x; })
    .attr('x2', function (d) { return d.target.x; });
});

force.start();

Answer 1

The difficulty you're having stems from the fact that there is no way for the nodes to get around each other without leaving the 1D line you're forcing them into. The repulsive forces prevent a node from passing over top of another node to get to the other side, so they become trapped in these sub-optimal arrangements.

By default, d3 force layout initializes nodes in a random position. However, you can initialize them yourself by setting the x and y properties of the data nodes objects before starting the layout. If you initialize the graph with the nodes ordered in a row, according to the order of their connections, then the force layout can handle the spacing for you.