在D3.js中旋转对象
问题描述:
我想根据某些数据旋转矩形。用下面的代码,旋转适用于整行。我怎样才能让每个“矩形”都有自己的轮换应用,并保持在同一条线上?在D3.js中旋转对象
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})`);
答
这就是rotate
正常行为,因为translate
属性的rotate
函数绕坐标系统(0,0)的原点的元素。
一个简单的方法是设置在同一位置翻译:
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>