Question

我正在尝试将可读标签应用于使用完全动态数据渲染的D3 Streamgraph - 各种不同的数据集，这些数据集随着时间的推移从实时数据和用于操纵所显示内容的控件发展而来。所有这一切都运作良好 - 问题是如何清楚标记流 - 没有使用传奇。

色调和亮度的巨大变化使得选择可读样式的标签漂浮在图表上非常棘手，特别是有限的SVG样式可用跨平台，并且标签有时也不可避免地在背景上重叠。例如黑色标签的“工作”，但有时难以阅读较暗颜色的顶部（我们确实需要确保良好的范围）......

任何人做过类似的事情/解决同样的挑战？我正在考虑使用传奇。

Answer 1

一些想法可能会有所帮助：

在文本周围添加背景矩形，不透明度设置为0.7（颜色与数据系列相同）。这有助于使文本弹出。对于矩形的边框，请使用d3js rgb.darker或rbg.brighter。

var pathStroke = d3.rgb( item.color ).darker(1.4).toString()

为了防止重叠标签，我可以想到两个解决方案 - 两者都很难。使用d3js Force Layout或编写自己的布局代码。我们最终在d3-traits中为工具提示编写了自己的布局代码。请参阅tooltips.js和layout.js。

d3.trait.layout.verticalAnchorLeftRight( foci, self.chartRect())

layout.js确实有一些通用和非常灵活的布局例程。它将在边界框内布置矩形以避免重叠，并确定标签是否需要左对齐或右对齐。如果rects的起源朝向边界框的右边缘，则它们是右对齐的。