如何防止在使用 D3.js 更新时重复嵌套元素

Question

我为每个数据项创建了一个 SVG 元素。现在我想将一个路径元素附加到每个 svg，但是当我更新数据时，它不会使用相同的元素，而是复制它。如何防止这种情况发生？

我的数据如下所示：

var dataset = [
     {"id": 1, "goalPct": 1, "curPct": 0.5},
     {"id": 2, "goalPct": 1, "curPct": 0.25},
     {"id": 3, "goalPct": 1, "curPct": 0.74}
];
var dataset2 = [
     {"id": 1, "goalPct": 1, "curPct": 0.74},
     {"id": 2, "goalPct": 1, "curPct": 0.5},
     {"id": 3, "goalPct": 1, "curPct": 0.25}
];

现在，我根据这些数据创建了一个 svg 元素。这就像它应该在更新调用时一样工作（当我推送新数据时），它不会重复。代码：

var svg = container.selectAll("svg").data(data);
svg.enter()
   .append("svg");

svg.exit().remove();
svg.transition().duration(750)

从这里开始，我想将路径元素附加到这些 svg 元素，但是当我推送新数据时，它只是附加一个新路径元素，而不是用新数据更新它。我不能对路径元素使用 .data(data) 函数，因为如果这样做，它会为 each svg 上的每个数据元素创建一个路径。 （例如，如果我有 2 个数据元素和 3 个 svg，它将在 3 个 svg 的每一个上创建 2 个路径元素）。代码：

var arc = svg.append("path")
        .attr({
            "d": function (d, i) {
                bronzeArc.endAngle((2 * Math.PI) * d.CurPct);
                return bronzeArc();
            }
        });

我试过移动 svg.exit().remove();周围，​​这对我没有任何帮助。有什么建议吗？

Answer 1

您需要将您的append('path') 呼叫移动到输入选择上。现在，即使已经存在一条新路径，您也总是在添加一条新路径。试试这样的：

var svg = container.selectAll("svg")
    .data(data);
svg.enter()
    .append("svg")
    .append("path");

svg.exit()
    .remove();

var arc = svg.select("path")
    .attr({
        "d": function(d, i) {
            bronzeArc.endAngle((2 * Math.PI) * d.CurPct);
            return bronzeArc();
        }
    });

现在您将只将路径附加到新的 svg，并且您将更新所有路径上的 d attr。