在 D3 强制布局中使用 data(...) 来更新图形

Question

我正在使用 D3 强制布局并添加代码以允许用户选择单个节点（这里，select 与 D3 select() 无关，但从用户的角度指示节点的突出显示状态）。一次只能选择一个节点。因此，当用户单击未选择的节点时，我想取消选择任何选定的节点。

我在节点上使用一个已选择的属性，并努力使用 D3 data(...) 或 datum(...) 方法来设置它。事实上，我无法让它像那样工作。我现在所拥有的似乎有点笨拙，所以我希望有一种更清洁的方法。

function deselectAll() {
    var sc = d3.selectAll("circle")
        .filter(function(d) {return (d.selected == "y")});

    var circles = sc.data();

    sc.transition()
        .duration(50)
        .style("stroke-width", "1px")
        .style("stroke", "#3182bd");

    if(null != circles && circles.length > 0) {
        for(i=0; i<circles.length; i++) {
            circles[i].selected = "n";
        }
    }
}

问题在于将 .data("n") 添加到链中不会将 'selected' 设置为 "n"。作为 d3 链的一部分，是否有可能做到这一点？

Answer 1

d3 中的许多选择（或转换）函数将当前数据从每个节点传递到您定义的函数。您可以随时修改此数据的内容。

使用您的示例，如果您想将具有 d.selected == "y" 的节点从“y”设置为“n”，您可以使用过滤后的选择，如下所示：

sc.each(function(d) {
    d.selected = "n";
});

将为选择中的每个节点调用一次此函数（每个节点都根据您的过滤器选择“y”），因此您可以简单地更改基准上的属性值。