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

Question

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

Answer 1

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

• 轴底部（）；
• 轴顶（）；
• 轴右（）；
• 轴左（）；

... 轴总是在原点渲染，即(0,0)。这是API 中的第一行：

无论方向如何，轴始终在原点渲染。

因此，您必须平移轴。

看看这个演示。第一个轴没有translate，第二个轴有：

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>