Question

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

我的数据看起来像这样：

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元素添加一个path元素，但是当我将新数据推入时，它只是附加一个新的path元素而不是用新数据更新它。我不能将.data（数据）函数用于路径元素，因为如果我这样做，它会为每个 svg上的每个数据元素创建一个路径。（例如，如果我有2个数据元素和3个svg＆＃39;它将在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();
        }
    });

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

如何使用D3.js

1 个答案: