如何在 d3 中显示分组条形图数据右侧的第二个 y 轴

Question

我正在使用 the following example 作为我的起点，用 d3 创建一个分组条形图。为了便于阅读，我做了一些小修改，如下面的屏幕截图所示；屏幕截图还演示了我遇到的问题。

我想添加第二个 y 轴，但自然我希望它一直在右边。正如您从屏幕截图中看到的那样，虽然它位于向左的 y 轴的右侧，但也与其相邻而不是数据的右侧。

我所做的就是添加以下内容（注意 orient("right")）

var yRight = d3.svg.axis()
    .scale(y)
    .orient("right");

然后我应用了以下追加，甚至在 Javascript 源代码的最后，以防顺序很重要，但无济于事。我将这两件事都基于如何处理（左）yAxis，但显然还需要做一些事情才能将第二个 y 轴一直移动到实际图表的右侧。

svg.append("g")
    .attr("class", "y axis")
    .call(yRight);

Answer 1

基于this other example我找到了我的答案，那就是添加一个transform/translate子句如下：

svg.append("g")
    .attr("class", "y axis")
    .attr("transform", "translate(" + width + " ,0)")
    .call(yRight);

虽然我是 d3 的新手，但评论中 transform/translate 对 d3 专家所做的一些解释肯定会提高此问答的质量。

Answer 2

是的，如您所见，.orient调整轴标签位置，而不是轴本身： "Changing the orientation affects the position of the ticks and their labels in relation to the axis path, but does not change the position of the axis itself; to change the position of the axis with respect to the plot, specify a transform attribute on the containing g element." mbostock wiki

"transform"、"translate" 将所有点移动 X 和 Y 值。这是一个 SVG 命令，而不是 D3。所以，你的命令

 .attr("transform", "translate(" + width + " ,0)")

将第二个 y 轴向右移动 "width" 像素，如您所愿。请注意，您已经对 x 轴做了同样的事情：

svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxis);

您使用变换将其向下移动 "height" 像素。如果没有这个翻译，x 轴将沿着图表的顶部。

还有其他有用的变换，如旋转，可用于旋转轴标签。当它们很长并且开始相互重叠时很有用。 SVG doc transform

如何在 d3 中显示分组条形图数据右侧的第二个 y 轴

How to display second y-axis to right of grouped bar chart data in d3

javascript

charts

d3.js