如何显示第二y轴到分组条形图数据d3的右(How to display second y-axis

我使用的创建与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:

基于此另一个例子，我发现我的答案，那就是添加一个变换/转换条款如下：

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

我完全新的D3，但这样的东西变换/转换从评论D3专家们肯定会改善这个Q＆A的质量一些解释。

是的，当你发现.orient调节轴标签位置，而不是轴本身：“改变方向影响蜱和其相对于轴路径标签的位置，但不改变轴本身的位置;以改变轴的位置相对于所述情节，指定含有克元素上的转换属性“。 mbostock维基

在“改造”，“翻译”，由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文档转换

文章来源: How to display second y-axis to right of grouped bar chart data in d3