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

Question

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

字符的直观表示如下:

我想添加标签，例如:

基本上在 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