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

Question

我正在使用 d3 创建分组条形图 the following example作为我的起点。为了便于阅读，我做了一些小的修改，如下面的屏幕截图所示；屏幕截图还演示了我遇到的问题。

我想添加第二个 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我找到了答案，那就是添加一个转换/翻译子句，如下所示:

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

我对 d3 完全陌生，因此 d3 专家在评论中对转换/翻译的作用进行一些解释肯定会提高此问答的质量。