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

问题是设置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。

旋转D3符号

1 个答案: