Preventing overlapping horizontal bars in a d3.js timeline
<p>I'm creating a timeline of events using d3.js. Some of the events on a row overlap each other. i.e., the next begins before the previous one ends. e.g.:</p>

<p><a href="https://i.stack.imgur.com/AJvoT.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/AJvoT.png" alt="enter image description here"></a></p>

<p>For each bar, if it's going to overlap a previous one, I'd like to move it down:</p>

<p><a href="https://i.stack.imgur.com/jfZ1f.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/jfZ1f.png" alt="enter image description here"></a></p>

<p>How would I do this? <a href="https://jsfiddle.net/philgyford/5zecjc6t/2/" rel="nofollow noreferrer">Here's a JSfiddle that generates the first example.</a></p>

<p>Here's some relevant parts:</p>

<pre><code>var spanX = function(d, i) { return xScale(d['begin']); },
    spanY = function(d) { return 0; },
    spanW = function(d, i) {
      return xScale(d['end']) - xScale(d['begin']);
    },
    spanH = 10; 

var span = chart.selectAll('.chart-span')
                    .data(data) 
                    .enter().append('rect')
                      .classed('chart-span', true)
                      .attr('x', spanX)
                      .attr('y', spanY)
                      .attr('width', spanW)
                      .attr('height', spanH);
</code></pre>

<p>(There are other issues, such as displaying more timelines under each other on the same chart, and displaying a label describing each timeline on the left... but one problem at a time!)</p>

<p><strong>UPDATE:</strong> For those following along, here's my finished chart: <a href="http://spelunker.moma.org/departments/" rel="nofollow noreferrer">http://spelunker.moma.org/departments/</a> (2017-02-08)</p>