如何在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

基于另一个例子我找到了我的答案，那就是添加一个转换/翻译子句，如下所示：

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

我对 d3 完全陌生，所以评论中 d3 专家对变换/翻译的作用的一些解释肯定会提高这个问答的质量。

Answer 2

是的，正如您所发现的，

.orient

调整轴标签位置，而不是轴本身： “更改方向会影响刻度及其标签相对于轴路径的位置，但不会更改轴本身的位置；要更改轴相对于绘图的位置，请在含有g元素。” 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 文档转换

Answer 3

举另一个例子，在我的项目中，它最终看起来像这样（在使用你的答案并修改它以匹配我现有的内容之后）：

// Add Y axis data
var y = d3.scaleLinear()
    .domain([0, d3.max(data, function (d) { return +Number(d.value); })])
    .range([height, 0])
;

if (showYAxis) {
    //Paint y-axis
    svg.append("g")
        .call(d3.axisLeft(y))
    ;

    //Add right-side y-axis
    var yRight = d3.scaleLinear()
        .domain([0, d3.max(data, function (d) { return +Number(d.value); })])
        .range([height, 0])
    ;

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