樹形圖Onclick d3.js

如何在使用d3.js點擊時從treemap獲取矩形的值？ HTML正文如下所示，樹形圖Onclick d3.js

<g class="depth"> 
    <g> 
     <title>"ABC"</title> 
     <g>"My rectangle tag here"</g> 
    </g> 
    <g> 
     <title>"DEF"</title> 
     <g>"My rectangle tag here"</g> 
    </g> 
</g>

我要訪問的標題標籤值，一旦我點擊矩形。

來源

2016-05-20 Ranjith

其實價值是指公司標題標籤中的內容。矩形是動態創建的。我在小提琴中創建了一個示例代碼。 – Ranjith

嘗試逐步解釋您想要做什麼以及您期望的結果。即顯示什麼，點擊什麼以及接下來會發生什麼（如彈出消息，打開下一頁，將值傳遞到腳本等） – Zero

https://jsfiddle.net/103kj49z/2/ – Ranjith

使用D3，您可以選擇在點擊一個矩形，並得到title這種方式（關於具體SVG結構你在你的問題提供）：

d3.selectAll("rect").on("click", function(){ 
    var title = this.parentNode.parentNode.getElementsByTagName("title")[0].childNodes[0]; 
    console.log(title); 
});

標籤標題的值存儲在var title。這裏是一個小提琴：https://jsfiddle.net/gerardofurtado/ow9a0vzd/

來源

2016-05-20 09:04:35

我認爲你是通過使用核心JavaScript :)複雜的答案:)。你可以使用d3選擇器或jQuery選擇器 – murli2308

它的工作。謝謝@Gerardo – Ranjith

簡短而親切

d3.selectAll('rect').on('click', function() { 
    var title = d3.select(this.parentNode.nextElementSibling).text(); 
});

如果標題元素是之前的矩形元素，然後使用

var title = d3.select(this.parentNode.previousElementSibling).text();

使用D3選擇器和文本功能得到你想要

值

Working Fiddle

來源

2016-05-20 09:21:30 murli2308

但不起作用。在OP結構中，矩形在組內，而標題在組外。 –

@GerardoFurtado它正在工作，你可以檢查小提琴 – murli2308

是的，我看到，我同意這是一個很好的解決方案！這是「D3方式」。但它不適用於OP提供的特定SVG結構。這就是我使用純JS的原因。 –

樹形圖Onclick d3.js

回答

相關問題