D3を使用して背景に応じてテキストの色を変更します

Question

D3、jsを使用して単純な棒グラフを作成し、テキストの色に問題がありました。 バーの中にテキストが入っているとかなり見えますが、テキストが長すぎると読みにくくなります。テキストを追加は他の色をし、これを可能ならば、それはクローム/ FF/IE11 /エッジで動作します

- どのようにテキストが矩形の内側にある場合（赤RECT幅に応じて、テキストの色を変更することができます - それ以外の場合は、デフォルトの色？

bar.append("text") 
    .attr('class', 'x-name-text') 
    .attr("x", 10) 
    .attr("y", barHeight/2) 
    .attr("dy", ".35em") 
    .text(function(d) { 
     return d.name; 
    }); 

jsfiddle demo

がUPDATE：このため 考えられる解決策：
1）の下に追加のバーへ層text：

bar.append("text") 
    .attr('class', 'x-name-text') 
    .attr("x", 10) 
    .attr("y", barHeight/2) 
    .attr("fill", "red") 
    .attr("dy", ".35em") 
    .text(function(d) { 
     return d.name; 
    }); 

2）rectを追加します（各rectのためのユニークなidを忘れないでください）

bar.append("rect") 
    .attr("fill", color(0)) 
    .attr("id", function(d) { 
    return d.id; 
}) 
... 

3）clipPathを追加し、同じidを使用して、必要なrectにxlink:hrefとリンク：

// clipPath depending on rect width 
bar.append('clipPath') 
    .attr('id', function(listItem, index) { 
    return listItem.id + '' + index; 
    }) 
    .append('use') 
    .attr('xlink:href', function(listItem){ 
    return '#' + listItem.id; 
    }); 

4）オーバーレイを追加しますclipPath SVG要素のidにリンクヤーtextclip-pathとスタイルpropery：

bar.append('text') 
    .attr("x", 10) 
    .attr("y", barHeight/2) 
    .attr("dy", ".35em") 
    .attr('class', 'overflow-name') 
    .style('clip-path', function(listItem, index) { 
     return 'url(#' + listItem.id + '' + index + ')'; 
    }) 
    .text(function(d) { 
     return d.name; 
    }); 

Working demo

Answer 1

これを解決するためのさまざまな方法があります。そのうちの1人がCSS mix-blend-modeを使用しています。ここで

.chart .x-name-text { 
    text-anchor: start; 
    mix-blend-mode: difference; 
} 

があなたのフィドルです： https://jsfiddle.net/nmmgLe95/

そして、ここであなたがmix-blend-modeのためのさまざまなオプションのリストを持っている： https://developer.mozilla.org/en-US/docs/Web/CSS/mix-blend-mode

[背景に対応してSVGのテキストの色]の