Question

我试图根据一些数据旋转矩形。使用以下代码，旋转适用于整行。我怎样才能得到每个＆＃34; rect＆＃34;应用自己的旋转，将它们保持在同一条线上？

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})`);

Answer 1

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

一个简单的解决方案是在相同的翻译中设置位置：

＆＃13;

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})`);

＆＃13;

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

＆＃13;

在D3.js中旋转对象

1 个答案: