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

Question

我使用以下示例作为起点，使用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

根据另一个示例，我找到了答案，那就是添加一个transform / translate子句，如下所示：

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

我对d3完全陌生，因此在注释中对d3专家对transform / translate所做的工作进行一些解释肯定会提高此问答的质量。

Answer 2

是的，如您.orient ， .orient调整了轴标签的位置，而不是轴本身：“更改方向会影响刻度线及其标签相对于轴路径的位置，但不会更改轴本身的位置；要更改轴相对于绘图的位置，请在包含的g元素上指定一个transform属性。” mbostock维基

“ 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文档转换