Question

我正在使用d3.js构建一个涉及数据，形状和文本的小项目。根据数据，文本出现在形状内。如果将鼠标悬停在形状上，则形状应变大并显示更多文本。

以下列方式添加文本，它可以正常工作：

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

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

什么让我悲伤的是鼠标悬停。我可以很好地调整形状的大小，但是我在调用文本的转换时遇到了麻烦。事实上，我真的不知道如何成功访问它。

以下是鼠标悬停事件中的一些代码：

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]没有方法'html'”。

那么，如何访问文本并更新它以便我的过渡将导致新文本可见并且旧文本消失？

我一直在反对这一点，所以任何帮助都深受赞赏。

Answer 1

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

我自己刚刚解决了这个问题，并认为我会帮忙。

d3.js foreignObject文本转换

1 个答案: