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属性。如果我通过浏览器检查器添加了transform translation属性，它会起作用。我也尝试添加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 /组添加到容器并设置转换即可。

如何在D3.js条形图中右对齐y轴？

1 个答案: