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');

Here您可以找到JSFiddle

OB的。我可以通过更改x属性来解决此问题，但我不希望这样。

提前谢谢！

Answer 1

这里的问题与D3无关。这是一个SVG规范：rotate属性的transform函数围绕原点（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>

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

1 个答案: