Treemap Onclick d3.js

Question

如何在使用d3.js点击时从treemap获取矩形的值？ HTML正文如下，

<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>

点击矩形后，我想访问标题标记值。

Answer 1

使用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/

Answer 2

短而甜蜜

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

如果title元素在rect元素之前，则使用

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

使用d3选择器和文本功能获取所需的值

Working Fiddle