从数据元素中获取 SVG 元素？答案

【问题标题】：Get SVG Element from Data Element?从数据元素中获取 SVG 元素？
【发布时间】：2015-02-26 14:17:03
【问题描述】：

所以，我有一个旭日形图，数据是分层结构的，而 SVG 数据是非分层结构的。也就是说数据是嵌套的，而SVG结构是一堆扁平的g元素。

我需要做的是隐藏作为当前单击元素的数据父级的文本，但是，由于 SVG 结构是扁平的，我不能简单地在 SVG 上使用 .parent() 选择器或类似的东西。

相反，我坚持使用数据元素的父元素，并试图确定对应的 SVG 元素。

那么，在 D3 中，我可以选择一个对应于特定数据元素的 SVG 元素吗？

<g>
<path d="M-6.429395695523604e-14,-350A350,350 0 0,1 -6.429395695523604e-14,-350L-4.9138952815787554e-14,-267.50000000000006A267.50000000000006,267.50000000000006 0 0,0 -4.9138952815787554e-14,-267.50000000000006Z" style="fill: rgb(0, 49, 83);">
<text id="Name_20150209-33_Depth-4_Value-187" transform="rotate(261.0230190507786)translate(283)rotate(-180)" dy=".35em" opacity="0" depth="4" root="0" text-anchor="end">Claim: #20150209-33</text>
</g>
<g>
<path d="M-6.429395695523604e-14,-350A350,350 0 0,1 -6.429395695523604e-14,-350L-4.9138952815787554e-14,-267.50000000000006A267.50000000000006,267.50000000000006 0 0,0 -4.9138952815787554e-14,-267.50000000000006Z" style="fill: rgb(0, 142, 240);">
<text id="Name_20150206-53_Depth-4_Value-153" transform="rotate(267.30141532780044)translate(283)rotate(-180)" dy=".35em" opacity="0" depth="4" root="0" text-anchor="end">Claim: #20150206-53</text>
</g>
<g>
<path d="M0,102.5A102.5,102.5 0 1,1 0,-102.5A102.5,102.5 0 1,1 0,102.5M0,20A20,20 0 1,0 0,-20A20,20 0 1,0 0,20Z" style="fill: rgb(204, 204, 255);" opacity="1">
<text id="Name_Institutional_Depth-1_Value-6826" class="isCenter" transform="translate(0,0)rotate(0)skewX(0)scale(1,1)" dy="3em" opacity="1" depth="1" root="1" text-anchor="middle">Institutional</text>
</g>

【问题讨论】：

标签： javascript svg d3.js data-visualization

【解决方案1】：

一种方法是依靠 D3 的数据匹配。这个想法是你传递你感兴趣的数据，告诉 D3 如何匹配，然后只处理更新选择。如下所示。

d3.selectAll("text")
  // match the datum of interest to the existing elements
  .data([datumOfElementOfInterest], function(d) { return d.keyValue; })
  // now do something with the matched element
  .attr("...", ...);

【讨论】：