如何在D3.js中应用旋转变换而不改变坐标系？

Question

我正在动态渲染多个矩形，并对它们应用旋转。我的目标是将类似钻石的形状放置在彼此下方，并隔离变换属性。这是否可能？

const svg = d3
  .select('#root')
  .append('g')
  .attr('transform', 'translate(200,200)');

svg.selectAll('.device')
  .data([1, 2, 3, 4])
  .enter()
  .append('rect')
  .attr('width', 10)
  .attr('height', 10)
  .attr('x', 0)
  .attr('y', (d, i) => { return i * 10 * Math.sqrt(2); })
  .attr('transform', 'rotate(45)')
  .attr('fill', '#000');

这里你可以找到JSFiddle

注意：我可以通过更改x属性来解决此问题，但我不想这样做。

提前感谢！

- Ioan Ungurean

Answer 1

这里的问题与D3无关，而是SVG规范：transform属性的rotate函数会使元素围绕原点（0,0）旋转，而不是围绕中心旋转。

有几种解决方法。由于您说不想更改x属性，最简单的解决方案是在相同的transform中设置位置：

.attr('transform', (d, i) => 'translate(0,' + (i * 10 * Math.sqrt(2)) + ') rotate(45)')
//this is the x attribute---------------^           ^----- and this is the y

这是您的代码进行更改后的版本:

const svg = d3
  .select('#chart')
  .append('g')
  .attr('transform', 'translate(200,50)');

svg.selectAll('.device')
  .data([1, 2, 3, 4])
  .enter()
  .append('rect')
  .attr('width', 10)
  .attr('height', 10)
  .attr('transform', (d, i) => 'translate(0,' + (i * 10 * Math.sqrt(2)) + ') rotate(45)')
  .attr('fill', '#000');

<script src="https://d3js.org/d3.v4.min.js"></script>
<svg id="chart" width="400" height="200"></svg>

- Gerardo Furtado