我正在尝试将可读标签应用于使用完全动态数据呈现的 D3 Streamgraph - 各种不同的数据集随着时间的推移从实时数据演变而来，并且提供的控件也用于操作所显示的内容。所有这一切都很好——问题是如何清楚地标记流——没有使用图例。
所需的色调和亮度的巨大变化使得为浮动在图形上的标签选择可读的样式非常棘手，特别是在有限的 SVG 样式可用跨平台并且标签有时也会不可避免地在背景上重叠的情况下。例如，黑色标签“有效”，但有时在较暗颜色的顶部很难阅读（我们确实需要确保良好的范围）......
有人做过类似/解决过同样挑战的事情吗？我目前正在考虑改用图例。
一些想法可能会有所帮助：
在文本周围添加一个背景矩形，不透明度设置为 0.7（颜色与数据系列相同）。这有助于使文本弹出。对于矩形的边框，使用 d3js rgb.darker或rbg.brighter。
var pathStroke = d3.rgb( item.color ).darker(1.4).toString()
为了防止标签重叠，我可以想到两种解决方案——都很难。使用 d3js强制布局或编写自己的布局代码。我们最终为d3-traits中的工具提示编写了自己的布局代码。请参阅tooltips.js和layout.js。
d3.trait.layout.verticalAnchorLeftRight( foci, self.chartRect())
layout.js 确实有一些通用且非常灵活的布局例程。它将在边界框中布局矩形，避免重叠，并确定标签是否需要左对齐或右对齐。如果矩形的原点朝向边界框的右边缘，则它们是右对齐的。