d3.js foreignObject 文本转换答案

【问题标题】：d3.js foreignObject text transitiond3.js foreignObject 文本转换
【发布时间】：2013-07-03 00:16:54
【问题描述】：

我正在使用 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 给我的消息是“Uncaught TypeError: Object [object Array] has no method 'html'”。

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

我一直在努力反对这一点，因此非常感谢任何帮助。

【问题讨论】：

如果我理解正确你在做什么，this 应该已经引用了foreignObject。所以d3.select(this).select("foreignObject") 可能没有按照您的想法做——您是否确认您的所有选择都是您认为的？
嗨 Lars，感谢您的评论。老实说，我不太确定如何验证上面的 sn-p 是否做了我认为它做的事情......我不认为它做我认为它做的事情，因为它没有做我写给它的工作做 - 但我不知道为什么。然而，“this”指的是矩形，因为矩形的高度确实会因调用而改变。
您可以使用console.log()打印结果来检查。
嗨，我似乎无法让 console.log() 做任何事情 - 它应该在控制台中显示参数，对吧？仍在尝试“掌握”文本。
是的，它应该在控制台中显示一些东西——比如console.log(d3.select(this).select("foreignObject"))。

标签： text d3.js transition

【解决方案1】：

将 d3.select(this).select("foreignObject") 替换为 d3.selectAll(this.getElementsByTagName("foreignObject"))

我自己解决了这个问题，并认为我会提供帮助。

【讨论】：