title: d3 chart legend overlapping
body: <p>Can someone help me identify why my these specific legends overlap each other? </p>
  
  <p>This is my code for constructing the legends and the spacing </p>
  
  <pre><code>  lSpace = WIDTH / dataGroup.length; 
  vis.append("text")
  .attr("x", (lSpace / 2) + i * lSpace)
  .attr("y", HEIGHT)
  .style("fill", function() { // Add the colours dynamically
    return d.color = color(d.key);
  })
  .attr("class", "legend")
  .on('click', function() {
    var active = d.active ? false : true,
      opacity = active ? 0 : 1;
    // Hide or show the elements based on the ID
    d3.select("#tag" + d.key.replace(/[ )(]/g, ''))
      .style("opacity", opacity);
    // Update whether or not the elements are active
    d.active = active;
  })
  .text(d.key);
  </code></pre>
  
  <p>I've been playing around with this to get the legend to space it accordingly no matter how many data legends there are. Unfortunately no matter how I space the legends I get one that overlaps the other.  </p>
  
  <p>Here is a fiddle: 
  <a href="https://jsfiddle.net/9gzcbajx" rel="nofollow noreferrer">https://jsfiddle.net/9gzcbajx</a></p>