【发布时间】：2021-06-03 01:18:39
【问题描述】：
我正在使用 D3.js 在此图像上制作图表：
一般来说，一切正常，但我不知道如何在栏没有覆盖所有标签时使标签可见。我的第一个想法是添加两个标签。一个是白色的，另一个是条形的。我希望能发生一些神奇的事情，让栏外的文字变成绿色，但这是行不通的。
这是我用来添加标签的一段代码：
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");
如何达到这样的效果？
【问题讨论】：
-
我猜没有 CSS 可以反转文本部分的颜色，它从矩形中突出来。也许您想以某种方式更改颜色，使文本在条形颜色和背景颜色上都可读。或者检测一个突出的标签并将其完全移到外面并赋予它另一种颜色。