D3.js 将平移和旋转与D3相结合

这很可能重复了一些，但代码过于复杂，OP没有添加解决方案代码。这不再是可复制的

我想知道如何以正确的顺序组合旋转和平移。可以绕原点旋转。但是，当我们用一个平移来跟随它时，原始旋转

是否有可能为正确的顺序应用构建此结构

jsfidle代码：

HTML:

---

您正在创建两个不同的转换。分配一个不会添加到另一个。也就是说，在做

rect2.attr('transform', translate);

您正在撤消第一个，因为它已被覆盖

若要同时拥有这两个，请将它们都添加到一个过渡中，例如

var rotateTranslate = d3.svg.transform().rotate(-45).translate(200, 100);
rect2.attr('transform', rotateTranslate);

要动态地执行此操作，您需要执行类似的操作

.attr("transform", function() {
    return d3.svg.transform()
        .translate(200, 100)
        .rotate(-45)
        .translate(-d3.select(this).attr("width")/2, -d3.select(this).attr("height")/2)();
}

---

完成JSFIDLE。

如果您希望在D3版本4.x+中执行此操作，您可以这样做：

.attr('transform', 'translate(200,100)rotate(-45)')

---

干杯。我以前尝试过链接方法，但它实现了先平移后旋转。现在我意识到d3是以相反的顺序（从右到左）应用它们-所以它实际上应该是

.translate（200100）.rotate（-45）

。当然，旋转是围绕原点的，所以需要另一个操作来围绕对象的质心旋转。但是

var rotateTranslate=d3.svg.transform（）.translate（200100）.rotate（-45）.translate（-this.width/2，-this.height/2）失败（意外值translate（200100）rotate（-45）translate（NaN，NaN）解析转换属性。）我认为是因为“this”没有正确引用我们要转换的对象。您会推荐什么？您可以在函数中使用它来设置属性，就像其他任何东西一样，例如，
d3.selectAll（“…”）.attr（“transform”，function（）{return d3.svg.transform（）.translate（200100）.rotate（-45）.translate（-this.width/2，-this.height/2）；}）好的，在小提琴中你没有选择任何东西，所以代码没有运行，但是我的例子也不正确
this.width
不起作用，除非将宽度明确设置为属性，并且需要调用
transform
返回的函数。我会更新答案的谢谢Lars这很有用
.attr("transform", function() {
    return d3.svg.transform()
        .translate(200, 100)
        .rotate(-45)
        .translate(-d3.select(this).attr("width")/2, -d3.select(this).attr("height")/2)();
}

.attr('transform', 'translate(200,100)rotate(-45)')