Question

D3是否有内置的方法来转换对象位置相对于其旋转？

例如，我有一个50x50的矩形，位于坐标（100,100）。矩形旋转45度。我想把它向前移动100个单位。

我可以手动做出触发来弄清楚，就像在这个小提琴中一样：http://jsfiddle.net/Qh9X5/6530/

function toRadians (angle) {
  return angle * (Math.PI / 180);
}

var svg = d3.select("body").append("svg")
    .attr("width", 500)
    .attr("height", 500)
    .append("g");



svg.append('rect').attr('width', 50).attr('height', 50).attr('fill', 'blue')
    .attr('transform', "translate(100, 100) rotate(45)");

var h = 100;
var angle = 45;
var o = Math.sin(toRadians(angle)) * h;
var a = Math.cos(toRadians(angle)) * h
console.log(o)


svg.append('rect').attr('width', 50).attr('height', 50).attr('fill', 'red')
    .attr('transform', "translate(100, 100) rotate(45)")
    .transition().duration(1000)
    .attr('transform', "translate(" + (h + o) + ", " + (h + a)  +") rotate(45)");

然而，它似乎是一个常见的用例。在我开始编写库以处理我需要的计算之前，d3是通过本机函数还是通过流行且维护良好的插件来支持这样的事情吗？

Answer 1

不，D3没有明确的任何内容。但是，您可以通过嵌套多个元素轻松完成此操作，无需使用三角函数：

var g = svg.append("g").attr("transform", "translate(100,100)");
g.append('rect').attr('width', 50).attr('height', 50).attr('fill', 'red')
  .attr('transform', "rotate(45)");
g.transition().duration(1000)
  .attr('transform', "translate(200,200)");

完整演示here。

Answer 2

实际上，您可以通过将矩形包装在g元素中来让浏览器为您解决...

＆＃13;

var svg = d3.select("body").append("svg")
    .attr("width", 500)
    .attr("height", 200)
    .append("g");



svg.attr('transform', "translate(100, 10) rotate(45)")
    .append('rect').attr('width', 50).attr('height', 50).attr('fill', 'blue')
	.transition().duration(2000)
	.attr('transform', "translate(100, 0)");

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>

＆＃13;

D3相对于旋转的平移

2 个答案: