D3.js 两边都有标签的图表

Question

D3.js 初学者。我在 D3 中有一个水平堆叠条形图，每个条形图只有 1 个值（因此，每个条形图被分成两个值）。

像这样：

val1 --------@@@@@@@@
val2 ----@@@@@@@@@@@@
val3 -----------@@@@@

通常情况下，D3 只支持每个栏的标题，如上。我正在寻找的是在栏的两端写一个标签，而不是标题。像这样：

val1 --------@@@@@@@@ valA
val2 ----@@@@@@@@@@@@ valB
val3 -----------@@@@@ valC

这可以通过直接在每个条的开头写入文本来实现，但如果一个条为 0%，则文本将与另一个 100% 的条重叠。另一种选择是对齐 left/right，但我也不知道该怎么做。

可能有不止一种方法可以做到这一点，希望 D3 大师能跳进来给我一些指导。

也许有一些方法可以在典型图表上自定义绘制标签？然后我可以保留左边的标签，并在每个栏的右侧绘制我的自定义标签。我不知道我会为此使用什么功能。

这是一个示例图，可用于演示标签功能。与我所问的相比，该图使用了“错误”的方向，但我可能能够调整答案：

https://www.d3-graph-gallery.com/graph/barplot_stacked_percent.html

Answer 1

以下是将一些标签添加到链接图表顶部的方法：

   svg.append('g') // add a new group
        .selectAll('text') // new empty selection
        .data(groups) // bind group names
        .enter() // add elements for new data
        .append('text') // text elements 
        .text(function(d) { return d}) // use the group names for the text
        .attr("x", function(d) { return x(d) + x.bandwidth()/2; }) // position the text in the middle of the appropriate bar
        .attr('y', -1) // raise the text slightly 
        .style('font-size', 10) 
        .style('text-anchor','middle')

D3.js 两边都有标签的图表

D3.js chart with labels on both sides

javascript

d3.js