Text d3.js foreignObject文本转换

我使用d3.js构建一个包含数据、形状和文本的小项目。根据数据，文本显示在形状内部。如果将鼠标悬停在形状上，该形状将变大并显示更多文本

文本按以下方式添加，效果良好：

Shapes  
.append("foreignObject")
[...]
.append("xhtml:body")
.style("font", "14px 'Helvetica Neue'")
.html(function(d) {return d.text;   });

我使用foreignObject而不是文本，因为我需要文本换行，这是迄今为止我能够实现这种效果的唯一方法

让我悲伤的是老鼠在上面。我可以重新调整形状的大小，但在文本上调用转换时遇到了问题。事实上，我真的不知道如何成功地访问它

以下是鼠标悬停事件的部分代码：

d3.select(this)         
.transition()
.duration(250)
.attr("height", function(d,i) {
    d.showAll()
    //d.textObject.width = 4;
    return d.height; 
} );

d3.select(this).select("foreignObject").transition()
.duration(250)
.select("xhtml:body")
.html(function(d) {return d.text;   });

其思想是showAll（）函数已经将文本更改为一个新值，但是代码没有做到这一点。Chrome给我的消息是“UncaughtTypeError:Object[Object Array]没有“html”方法”

那么，我如何访问文本并对其进行更新，以便我的转换将导致新文本可见而旧文本消失

我已经为此绞尽脑汁了一段时间，因此非常感谢您的帮助。

将d3.select（this.select（“foreignObject”）替换为d3.selectAll（this.getElementsByTagName（“foreignObject”））

---

我只是自己解决了这个问题，我想我会帮上忙。

如果我正确理解了你在做什么，

这个

应该已经提到了

外来对象

。因此，

d3.select（this）。select（“foreignObject”）

可能不会做你认为它会做的事情——你验证了你所有的选择都是你认为应该做的吗？嗨，拉尔斯，谢谢你的评论。老实说，我真的不知道如何验证上面的代码片段是否与我认为的一样。。。我不认为它做了我认为它做的，因为它没有做我写它要做的工作-但我不知道为什么。然而，“this”指的是rect，因为调用后rect的高度确实发生了变化。您可以使用

console.log（）

打印结果进行检查。您好，我似乎无法让console.log（）执行任何操作-它应该在控制台中显示参数，对吗？仍在尝试“获取”文本。是的，它应该在控制台中显示一些内容，比如

console.log（d3.select（this.select）（“foreignObject”）

。