javascript - 为什么我的数据选择器有副作用？

Question

我正在使用 D3 构建一个小型可视化，需要将多个不同的内容绑定(bind)到同一数据元素。我有一个观点，我似乎能够让它工作的唯一方法是通过多次调用 Data()我觉得这可能效率很低。

作为示例，这是我的加入代码:

// Sort out the data joins
var joinedGroups = segments.selectAll(".menu").data(pie(data));
var joinedSegments = segments.selectAll(".menu-segment").data(pie(data));
var joinedIcons = segments.selectAll("circle").data(pie(data));

这是一张图片来帮助说明我正在构建的内容:

在我的 DOM 中，您可以看到它们之间的关系:

• 加入群组 = <g>
• 加入分段 = <path>
• 加入图标 = <circle>

下面是 DOM 的输出来说明:

<g class="menu">
       <path class="menu-segment" d="" style="fill: rgb(255, 0, 0);"></path>
       <circle r="5" cx="29.999999999999996" cy="-51.96152422706632"></circle>  
</g>

当时我正在使用joinedGroups添加新的<g> , <path>和<circle>元素。那时我改用 joinedSegments更新我的饼图部分。这是我觉得错误的一点:

// Update existing segments and icons
joinedSegments.attr("d", arc);
joinedIcons.attr("cx", function(d) { return calcMidPoint(d).x; })
           .attr("cy", function(d) { return calcMidPoint(d).y; });

经过思考，我得出的结论是，我现在应该能够拿走我的 joinedGroups并选择所有 .menu-segment实例，以获得我的所有<path>而是元素。

joinedGroups.selectAll(".menu-segment").attr("d", arc);

此时我以为我破解了它，我不再使用 joinedSegments所以我拿出了Data()在顶部调用，然后它停止正常工作，错过了应该在那里的段。所以我对调用 Data() 的副作用有点困惑- 谁能解释一下发生了什么事吗？

你可以看一个例子JSFiddle此处 - 注释掉行 #123 和 #124 说明调用 Data() 的副作用我也指的是，因为黄色部分将会消失。

Answer 1

根本问题是您有嵌套元素，并且每个元素(g、path 和 circle)都需要具有数据绑定(bind)到它们，因为您要根据数据设置属性。

您将数据显式绑定(bind)到 g 元素(第 122 行)，因此工作正常。对于输入选择，一切都正常，因为 .append() 具有将绑定(bind)数据“继承”到附加元素的副作用。问题出在更新选择上。您用来选择嵌套元素并更新其属性的 .selectAll() (第 143 和 144 行)不会更新您所依赖的绑定(bind)数据在函数中打开以设置属性值。

有两种方法可以解决这个问题。第一个是您已经拥有的——显式选择那些嵌套元素并更新它们的数据。然而，这需要额外的代码，并且依赖于嵌套元素的顺序与其父元素相同，这是无法保证的。

更好的方法是简单地将第 143 和 144 行中的 .selectAll() 替换为 .select()。这是可能的，因为每种类型只有一个元素嵌套在 g 下，因此选择无论如何都只包含一个元素。在这种情况下，.selectAll() 和 .select() 之间的主要区别在于，虽然 .selectAll() 不会更新绑定(bind)的数据对于选定的元素，.select() 会执行此操作。效果与您当前的解决方案相同 - 绑定(bind)到嵌套元素的数据已正确更新，只是您不需要任何额外的代码并且不依赖于所选元素的顺序。

完整演示 here .