D3을 사용하여 배경에 따라 텍스트 색상을 변경하십시오.

Question

D3, js를 사용하여 간단한 막대 차트를 만들고 텍스트 색상에 문제가 있습니다. 텍스트가 막대 안에 있으면 꽤 잘 보이지만 텍스트가 너무 길면 읽을 수 없게됩니다. 그렇지 않으면 기본 색상 - - 다른 색상이 가능

텍스트를 덧붙이 경우가 크롬/FF/IE11/에지에서 작동하는지? 내가 텍스트가 RECT 내부에있는 경우 (빨간색 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는 (고유 id 잊지 않는 각 rect)

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에 연결 yer의 textclip-path 스타일 때에 프로퍼티 :

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

이 문제를 해결하기 위해 여러 가지 방법이 있습니다. 그들 중 하나는 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 텍스트 색상]의