title: d3 c3: adding svg element to c3 chart
body: <p>I'm trying to place an svg element on a c3 chart such that it aligns horizontally with one of the tick marks.
  <a href="https://i.stack.imgur.com/uxi31.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/uxi31.png" alt="enter image description here"></a></p>
  
  <p>See fiddle here: <a href="https://jsfiddle.net/4sw82k1z/3/" rel="nofollow noreferrer">https://jsfiddle.net/4sw82k1z/3/</a></p>
  
  <p>For example, I'd like the red label to be centered above tick mark '1' and the green label centered above tick mark '3'.</p>
  
  <p>I'm new to the d3 world.  The way that I've tried to accomplish this is in absolute coordinates, which fail when the 'html' pane of the fiddle is resized.  To see what I mean, click drag the size of the 'html' window.</p>
  
  <pre><code>var rightlabel = d3.select("#chart svg")
  .append("svg").attr("width", 1200).attr("height", 50) //container for txt
  .append("text").text("i'm a label in the green region") //text element
  .style("fill", "green").attr("transform","translate(400,20)");
  </code></pre>
  
  <p>What's the proper way to achieve this?</p>