D3右侧只有一个Y轴用于绘制折线图 [英] D3 only one Y-axis on right for plotting line chart

问题描述

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

I am trying to plot a D3 line chart, with its Y-axis on the right, instead of being on the left. I used var yAxis = d3.axisRight(y);, but this code snippet plots my labels on the right, instead of shifting the axis to the right. The version I'm using of D3 is v4.9.1. Any help is appreciated

推荐答案

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

In D3, no matter what axis generator you use...

• axisBottom();
• axisTop();
• axisRight();
• axisLeft();

...轴始终在原点((0,0))上进行渲染.这是 API 的第一行:

... the axes are always rendered at the origin, that is, (0,0). It's the very first line in the API:

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

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

因此，您必须平移轴.

看一下这个演示.第一个轴没有 translate ，第二个轴没有:

Have a look at this demo. The first axis has no translate, the second one does:

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>

这篇关于D3右侧只有一个Y轴用于绘制折线图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！