Javascript 创建d3外来对象后，是否可以更改其xy位置？

我需要更改d3外来对象（textarea）添加到组后的xy位置。如果拖动很简单，我会执行以下操作：

d3.select(this).attr("transform", "translate(" + (d.x = d3.event.x) + "," + (d.y = d3.event.y) + ")");

---

但是如何手动更改位置？我尝试设置.attr（x100），但什么也没发生。谁能帮帮我吗

您的代码（在链接中）的问题是

文本

是对

HTML元素的选择，而不是对

外来对象

的选择。因此，您在

x

属性中所做的任何更改实际上都应用于

解决方案：断开您的链条，使

文本

仅作为

外来对象

的选择。请看下面的演示：

var svg=d3.select（“body”）.append（“svg”）
.attr（'width'，500）
.attr（'height'，200）
.attr（'样式'，'轮廓：薄的纯黑色；'）
.style（'background-color'，'#f4f3f1'）；
var grp=svg.append（“g”）
.基准({
x:0,，
y:0
})
.attr（“类别”、“集团”）；
var text=grp.append（“外来对象”）
.基准({
x:50，
y:50，
宽度：100，
身高：100
})
.attr（“x”，函数（d）{
返回d.x；
})
.attr（'y'，函数（d）{
返回d.y；
})
.attr（'width'，函数（d）{
返回d.width；
})
.attr（高度），功能（d）{
返回d.高度；
});
var textarea=text.append（“xhtml:body”）
.attr（'xmlns'，'http://www.w3.org/1999/xhtml')
.append（'textarea'）
.attr（“id”、“文本”）
.样式（“宽度”，100+“像素”）
.样式（“高度”，100+“像素”）
.property（“值”，“此外来对象不会停止！”）
.样式（“文本对齐”、“居中”）；
move（）；
函数move（）{
text.transition（）
.持续时间（1000）
.attr（“x”，350）
.transition（）
.持续时间（1000）
.attr（“x”，50）
.每个（“结束”，移动）
}

---

你能分享一个JSFIDLE吗？这里的“text.attr（“x”，300）；”不起作用。嗨，杰拉尔多，再次感谢你。因此，foreignObject是一个容器，向其中添加html元素（textarea），然后移动容器，而不是textarea本身。您可以相对于其包含的SVG移动foreignObject，也可以相对于其foreignObject的主体容器移动HTML元素。。。但它们是不同的东西。