1

我正在使用 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'”。

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

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

4

1 回答 1

0

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

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

于 2013-08-18T18:41:17.127 回答