使用D3

Question

我使用D3，js创建了一个简单的条形图，并遇到了文本颜色问题。 当文本在栏内时它看起来很好，但如果文本太长则变得不可读。 如何根据红色矩形宽度更改文本颜色（如果文本在矩形内 - 否则为默认颜色 - 其他颜色，如果可能，则使其在Chrome / FF / IE11 / Edge中有效？

在栏中附加文字：

 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

更新 可能的解决方案：
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并使用相同的xlink:href将其与rect关联到必要的id：

 // 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）将覆盖层text附加clip-path样式符合clipPath SVG元素的ID：

 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