旋转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")

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

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元素并将单独的变换应用于每个元素,例如.