如何在 D3.js 條形圖中右側對齊 y 軸？

Question

const y1 = d3.scaleLinear().range([300, 0]);
y1.domain([0, 100]);
const yAxisRight = d3.axisRight(y1);

const yAxisRight_g = svgContainer.append('g')
  .attr('class', 'y axis right')
  .call(yAxisRight)
  .append('text')
  .attr('transform', 'rotate(-90)')
  .attr('transform', 'translate(600px, 0)')
  .attr('y', 6).attr('dy', '.71em');

我想在右側而不是左側顯示 y 軸。 我使用屬性轉換將其顯示在右側，但它不起作用。 我檢查了 DOM，發現它根本沒有添加 transform 屬性。 如果我通過瀏覽器檢查器添加轉換翻譯屬性，它會起作用。 我也嘗試添加 CSS：

.right {
  transform: translate(600px, 0);
}

但它確實失敗了。

Answer 1

const yAxisRight_g = svgContainer.append('g')
  .attr('class', 'y axis')
  .attr('transform', 'translate(' + (700) + ', 0)')
  .call(yAxisRight)
  .selectAll('text');

我正在附加文本並向其添加轉換，但它不起作用。 簡單地將 g/ group 附加到容器和設置轉換。