在D3中堆叠转换

Question

我有一个已经应用了转换的SVG元素（可以是单个转换，也可以是多个转换的组合）。我正在尝试对其进行其他转换。问题在于该变换可以重复应用，并且需要与现有的变换状态堆叠在一起（因此将附加的变换附加到末尾是不切实际的）。从d3 API看，我没有发现任何可以应用相对转换的东西（尽管我必须承认，我对d3的高级功能并不熟悉）。手动解析当前的转换字符串，然后免费计算SVG已经在后台执行的转换矩阵，这似乎很愚蠢，有没有更好的方法？

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

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

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

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())