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'」。

那麼，如何訪問文本並進行更新，以便我的轉換將導致新文本可見並且舊文本消失？

我一直在抨擊我的頭一陣子，所以任何幫助深表謝意。

來源

2013-07-03 user2544599

如果我正確理解你在做什麼，'this'應該已經指向'foreignObject'。所以'd3.select（this）.select（「foreignObject」）'可能不會做你認爲它所做的事情 - 你是否確認所有選擇都是你認爲他們應該做的？ –

嗨拉爾斯，感謝您的評論。說實話，我真的不確定如何驗證上面的代碼段是否符合我的想法......我認爲它沒有做到我認爲它做的事，因爲它沒有完成我寫它做的工作 - 但我不知道爲什麼。然而，'this'指的是矩形，因爲矩形的高度確實是由於調用而改變的。 – user2544599

您可以通過console.log（）打印結果進行檢查。 –

更換d3.select（本）。選擇

我只是解決了這個我自己，我想我會幫助（「foreignObject」）與d3.selectAll（this.getElementsByTagName（「foreignObject」））。

來源

2013-08-18 18:41:17 Freecube

d3.js foreignObject文本轉換

回答

相關問題