7

我正在渲染一个看起来像这样的 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")
4

1 回答 1

11

问题是第二次调用 settransform覆盖了这里的第一个值：

.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元素并对每个元素应用单独的转换，例如。

于 2013-11-03T21:01:21.190 回答