d3.js - 旋转 D3 符号

Question

我正在渲染一个如下所示的 d3 符号:

svg.append('path')
    .attr("d", d3.svg.symbol().type("triangle-up").size(10))
    .attr("transform", function(d) { return "translate(" + 100 + "," + 100 + ")"; })
    .style("fill", "red")

我想旋转这个三角形，使三角形指向左 <| .如何在旋转此符号的同时将其保持在我的可视化中的相同位置？我一直在尝试执行以下操作，但符号移动到我的可视化项的左上角(它不会停留在转换创建的位置):

svg.append('path')
    .attr("d", d3.svg.symbol().type("triangle-up").size(10))
    .attr("transform", function(d) { return "translate(" + 100 + "," + 100 + ")"; })   
    .attr("transform", "rotate(-45)")
    .style("fill", "red")

Answer 1

问题是第二次调用 set transform在这里覆盖第一个值:

.attr("transform", function(d) { return "translate(" + 100 + "," + 100 + ")"; })   
.attr("transform", "rotate(-45)") // Only this value will remain as the value of the attr

要修复它，您应该将旋转附加到 transform 的原始值上。 :

.attr("transform", function(d) { return "translate(" + 100 + "," + 100 + ") rotate(-45)"; })   

另一种解决方案是把symbol嵌套 g元素并对每个元素应用单独的变换，example .