Question

我有一个已经应用了变换的SVG元素（这可以是单个翻译，也可以是多个变换的组合）。我正在尝试对其应用额外的转换。问题是这个变换可以重复应用，并且需要与现有的变换状态叠加（因此在末尾添加额外的变换是不切实际的）。通过d3 API，我没有注意到任何可以让我应用相对变换的东西（虽然我必须承认，我并不熟悉d3的高级功能）。手动解析当前变换字符串然后计算SVG已经在幕后免费做的相同变换矩阵似乎很傻，有没有更好的方法？

例如，如果现有元素已具有以下属性：

transform="translate(30) rotate(45 50 50)"

我调用这个转换逻辑两次，希望每次在每个维度上将元素偏移1个像素，我需要解析并处理翻译和旋转调用，因为新的翻译在旋转之前无法应用

Answer 1

我实际上一直认为应该有一个特殊的功能，类似于classed()函数处理添加和删除某些类而不会弄乱其他类的方式。

但是，在此之前，只需访问现有属性，然后连接字符串：

selection.attr("transform", function(d){
        return this.getAttribute("transform") +
                     " translate(30) rotate(45 50 50)";
    });

你也可以使用d3.select(this).attr("transform")，但原始的javascript应该可以工作并保存函数调用。

请注意不要将属性转换与样式转换混淆。

Answer 2

正如Lars在评论中指出的那样，d3.transform将从字符串生成变换。将其应用于我的原始问题，我可以执行以下操作：

element.attr('transform', d3.transform('translate(30) rotate(45 50 50) translate(1,1) translate(1,1)').toString())

在D3中堆叠变换

2 个答案: