如何将轴标签添加到 d3 中的桑基图中？

Question

我想在桑基图上添加轴。图表的代码可以在以下链接中找到：https://github.com/irbp005/d3SankeyAndLineInteraction

char 的可视化表示如下：

我想添加如下标签：

基本上在y轴的两侧。关于如何实现此目标的任何想法？

Answer 1

这应该相当简单。为每一侧添加一个 g 元素并应用平移变换将其定位在 x 轴上，然后使用类似以下内容的内容：

selection.append("text")
      .attr("class", "axis-label")
      .attr("transform", "rotate(-90)")
      .attr("y", -50)
      .attr("x", -height/2)
      .attr("fill", "#000")
      .style("text-anchor", "middle")
      .text("Y Label");

查看第 1 章中的第一个示例，该示例解释了向绘图轴添加 X 和 Y 标签： https://leanpub.com/d3-t-and-t-v4/read

如何将轴标签添加到 d3 中的桑基图中？

How can I add axis labels to a sankey diagram in d3?

axis-labels

d3.js

sankey-diagram