如何将轴标签添加到 d3 中的 sankey 图中？答案

【问题标题】：How can I add axis labels to a sankey diagram in d3?如何将轴标签添加到 d3 中的 sankey 图中？
【发布时间】：2017-01-09 18:49:18
【问题描述】：

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

char 的可视化表示如下：

我想添加如下标签：

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

【问题讨论】：

标签： d3.js axis-labels sankey-diagram

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

【讨论】：

您可能还必须将现有图表向右移动并缩短宽度，以便在 SVG 上为文本框留出空间。我建议使用变量来存储其尺寸，例如´var chartBox = { x: 50, y: 0, width: svgWidth - 100, height: svgHeight}´
同意马修。我不知道 OP 如何从发布的代码中进行设置，因此很难提供更具体的内容。我通常使用recommended convention for margins 并添加左右填充，以便为“绘图”区域之外的任何标签腾出空间。