如何在 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 附加到容器和设置转换。