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

【问题标题】：How to display second y-axis to right of grouped bar chart data in d3如何在d3中显示分组条形图数据右侧的第二个y轴
【发布时间】：2015-02-19 15:16:22
【问题描述】：

我正在使用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);

【问题讨论】：

【解决方案1】：

基于this other example我找到了答案，那就是添加一个转换/翻译子句，如下所示：

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

尽管我对 d3 完全陌生，因此 cmet 中的 d3 专家对转换/翻译所做的一些解释肯定会提高此问答的质量。

【讨论】：

【解决方案2】：

是的，正如您所发现的，.orient 调整轴标签位置，而不是轴本身： “更改方向会影响刻度及其标签相对于轴路径的位置，但不会更改轴本身的位置；要更改轴相对于绘图的位置，请在含有 g 元素。” mbostock wiki

“变换”、“平移”将所有点移动 X 和 Y 值。这是一个 SVG 命令，而不是 D3。所以，你的命令

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

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

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

您使用变换将其向下移动“高度”像素。如果没有这个平移，x 轴将位于图表的顶部。

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

【讨论】：