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

- turtle

Answer 1

问题在于第二次调用 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 元素中，并对每个元素应用单独的转换，例如。

- musically_ut