d3.js - D3 右侧只有一个Y轴用于绘制折线图

Question

我正在尝试绘制一个 D3 折线图，其 Y 轴在右侧，而不是在左侧。我使用了 var yAxis = d3.axisRight(y);，但此代码片段将我的标签绘制在右侧，而不是将轴向右移动。我使用的 D3 版本是 v4.9.1。感谢任何帮助

Answer 1

在 D3 中，无论您使用什么轴生成器...

• axisBottom();
• axisTop();
• axisRight();
• 左轴();

...轴总是在原点呈现，即(0,0)。这是 API 中的第一行:

Regardless of orientation, axes are always rendered at the origin.

因此，您必须平移轴。

看看这个演示。第一个轴没有翻译，第二个轴有:

var svg = d3.select("svg");
var scale = d3.scaleLinear().range([10, 140]);
var axis = d3.axisRight(scale);
var g1 = svg.append("g").call(axis);
var g2 = svg.append("g").attr("transform", "translate(270,0)").call(axis);

<script src="https://d3js.org/d3.v4.min.js"></script>
<svg></svg>