Question

所以，我有一个sunburst，数据是分层结构的，而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>

Answer 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("...", ...);

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

1 个答案: