如何在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文檔轉換