Javascript Treemap Onclick d3.js

如何在使用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>

“ABC”
“我的矩形标签在这里”
“DEF”
“我的矩形标签在这里”

---

单击矩形后，我想访问标题标签值。

使用D3，您可以单击一个矩形，然后通过这种方式获得标题（关于您在问题中提供的特定SVG结构）：

标签标题的值存储在

var title

中。这是一把小提琴：

又短又甜

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选择器和文本函数获取所需的值

---

实际值表示标题标签中的内容。矩形是动态创建的。我已经在小提琴中创建了一个示例代码。试着一步一步地解释你想要做什么，以及你期望得到什么结果。i、 e.显示的内容、单击的内容以及接下来发生的事情（如弹出消息、打开下一页、将值传递到脚本中等）我想获取标题标签中的文本。我认为您使用核心javascript:）会使答案复杂化。您可以使用d3选择器或jquery选择器，但不起作用。在OP结构中，矩形在组内，标题在组外。@GerardoFurtado它起作用了你可以检查小提琴是的，我明白了，我同意这是一个很好的解决方案！这是“D3方式”。但是它不适用于OP提供的特定SVG结构。这就是为什么我使用了一些纯JS。我从问题中的小提琴中复制了SVG结构，如果他想要以前的兄弟姐妹，他可以使用

这个。previousElementSibling

@RanjithBut看看问题中的小提琴，@murli2308:OP想要标题，并且标题不是rect的同级（即，不在rect的同一级别）。这就是为什么以前的ElementSibling和下一个ElementSibling都不起作用的原因。

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