title: SVG text color with correspond to background
body: <p>I am using D3.js to make a graph like on this image:</p>
  
  <p><a href="https://i.stack.imgur.com/F97GX.jpg" rel="nofollow"><img src="https://i.stack.imgur.com/F97GX.jpg" alt="enter image description here"></a></p>
  
  <p>Generally, all works fine, but I don't know how to make the labels visible when the bar doesn't cover all of it. My first idea was to add two labels. One with white color and another with bar color. I hoped that some magic could happen and text outside of the bar would be green, which did not work. </p>
  
  <p>Here is the piece of code that i use to add labels:</p>
  
  <pre><code>var rect = this.svg.selectAll("text")
                  .data(dataset, dataset.key)
                  .enter();
  
  rect.append("text")
    .text(function(d) { return d.value; })
    .attr("text-anchor", "end")
    .attr("x", w-10) 
    .attr("y", function(d, i) { return graph.xScale(i) + graph.xScale(1)/2; })
    .attr("fill", color)
    .attr("class", "value");
  
  rect.append("text")
    .text(function(d) { return d.key; })
    .attr("text-anchor", "start")
    .attr("x", 10) 
    .attr("y", function(d, i) { return graph.xScale(i) + graph.xScale(1)/2; })
    .attr("fill", color)
    .attr("class", "key");
  
  rect.append("text")
    .text(function(d) { return d.key; })
    .attr("text-anchor", "start")
    .attr("x", 10) 
    .attr("y", function(d, i) { return graph.xScale(i) + graph.xScale(1)/2; })
    .attr("fill", textColor)
    .attr("class", "keybg");
  </code></pre>
  
  <p>How to achieve such effect?</p>