D3.js中如何旋转物体

Question

我试图根据一些数据旋转矩形。使用下面的代码，旋转应用于整个线条。如何让每个“rect”都有自己的旋转应用，并使它们保持在同一行？

let canevas = d3.select("body")
    .append("svg")
    .attr("width", 1000)
    .attr("height", 1000);

let rectangles = d3.select("svg")
    .selectAll("rect")
    .data([10, 20, 30, 40])
    .enter()
    .append("rect")
    .attr("x", (d, i) => (i * 30) + 30)
    .attr("y", 20)
    .attr("width", 20)
    .attr("height", 20)
    .attr("transform", (d) => `rotate(${d})`);

- Le Sparte

Answer 1

这是rotate的正常行为，因为translate属性的rotate函数会将元素围绕坐标系原点(0,0)旋转。

一个简单的解决方案是在同一translate中设置位置:

let canevas = d3.select("body")
   .append("svg")
   .attr("width",300)
   .attr("height",100);

let rectangles = d3.select("svg")
   .selectAll("rect")
   .data([10,20,30,40])
   .enter()
   .append("rect")
   .attr("width",20)
   .attr("height",20)
   .attr("transform", (d,i) => `translate(${(i*30)+30},30) rotate(${d})`);

<script src="https://d3js.org/d3.v4.min.js"></script>

- Gerardo Furtado