D3.js 图表，两边都有标签答案

【问题标题】：D3.js chart with labels on both sidesD3.js 图表，两边都有标签
【发布时间】：2023-04-01 05:18:01
【问题描述】：

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

像这样：

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

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

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

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

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

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

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

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

【问题讨论】：

您应该发布图表的 MRE。您要求的内容非常简单，但答案可能因您的代码而异。
@SmokeyShakers 完成 :)。与此同时，我对 D3 有了更多的了解。因此，只需在某处放置一个额外的选择器，但正确的做法仍然让我望而却步。我可能需要花一些时间来做一些关于如何使用 D3 SVG 绘图的教程。某人的一个例子可以澄清我认为的很多事情:)

标签： javascript d3.js

【解决方案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')

【讨论】：