我正在动态渲染多个矩形,并对它们应用旋转。我的目标是将类似钻石的形状放置在彼此下方,并隔离变换属性。这是否可能?
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');
注意:我可以通过更改x
属性来解决此问题,但我不想这样做。
提前感谢!