d3.js foreignObject文本转换

问题描述：

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

的文本以下列方式增加和正常工作：

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

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

我一直在抨击我的头一阵子，所以任何帮助深表谢意。

如果我正确理解你在做什么，'this'应该已经指向'foreignObject'。所以'd3.select（this）.select（“foreignObject”）'可能不会做你认为它所做的事情 - 你是否确认所有选择都是你认为他们应该做的？ –

嗨拉尔斯，感谢您的评论。说实话，我真的不确定如何验证上面的代码段是否符合我的想法......我认为它没有做到我认为它做的事，因为它没有完成我写它做的工作 - 但我不知道为什么。然而，'this'指的是矩形，因为矩形的高度确实是由于调用而改变的。 – user2544599

您可以通过console.log（）打印结果进行检查。 –

答

更换d3.select（本）。选择

我只是解决了这个我自己，我想我会帮助（ “foreignObject”）与d3.selectAll（this.getElementsByTagName（ “foreignObject”））。

d3.js foreignObject文本转换

相关推荐