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

我正在创建一个以d3为起点的分组条形图。为了可读性，我做了一些小的修改，如下面的屏幕截图所示；屏幕截图还显示了我遇到的问题

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

我所做的就是在orientright中添加以下注释

然后我应用了下面的append，即使是在Javascript源代码的最后，以防顺序问题，但是没有用。这两件事都是基于左y轴是如何被处理的，但显然还有一些事情需要做，以便将第二个y轴一直移动到实际图表的右侧

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

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

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

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

是的，正如您所发现的，.调整轴标签位置，而不是轴本身： 更改方向会影响记号及其标签相对于轴路径的位置，但不会更改轴本身的位置；要更改轴相对于绘图的位置，请在包含的g元素上指定变换属性。

“变换”、“平移”按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.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxis);