时间戳

首页 > 解决方案 > 平移后缩放路径对象

javascript - 平移后缩放路径对象

问题描述

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

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)");

标签： javascriptd3.jssvg

解决方案

如您所知，设置新的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，但可以替换，如本答案中所述。

但是，在您的特定情况下，您可以直接在 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>

推荐阅读