平移后缩放路径对象

Question

我已经设置了一些代码来获取路径、缩放和移动，但是似乎一旦新的变换到位，旧的变换就会被删除？如何移动和缩放路径？

var path = svg.append('path')
    .attr('d', function(d) {
        var x = 100, y = 100;
        return path;
    })
    .style("fill", "#1a5d18")
    .attr("transform", "translate(300,0)");

var path = path.attr("transform","scale(.3)");

Answer 1

如您所知，设置新的transform 将覆盖之前的。

让我们在这个基本演示中看到这一点：

const circle = d3.select("circle");
circle.attr("transform", "translate(100,50)");
circle.attr("transform","scale(.3)");

<script src="https://d3js.org/d3.v5.min.js"></script>
<svg>
  <circle r="50"></circle>
</svg>

如您所见（实际上，您看不到！），我们将圆圈移动到100,50，但scale(0.3) 使圆圈回到原来的位置。

一个可能的解决方案是获取以前的transform 值。不幸的是，D3 v4 和 v5 不再有d3.transform，但可以替换它，如this answer 中所述。

但是，在您的特定情况下，您可以直接在 DOM 元素中使用 getAttribute 获取先前的 translate 值，并添加 scale。

这里是演示：

const circle = d3.select("circle");
circle.attr("transform", "translate(100,50)");
circle.attr("transform", function() {
  return this.getAttribute("transform") +
    " scale(0.3)";
});

<script src="https://d3js.org/d3.v5.min.js"></script>
<svg>
  <circle r="50"></circle>
</svg>