如何在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来说是全新的，所以对评论中d3专家所做的转换/翻译的一些解释肯定会提高此Q＆amp; A的质量。

Answer 2

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

“transform”，“translate”将所有点移动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