如何防止使用D3.js更新时重复嵌套元素
提问于 2016-05-06 11:04:00
我为每个数据项创建了一个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)从这里开始，我想将path元素附加到这些svg元素中，但是当我将新的数据推入时，它只是附加了一个新的path元素，而不是用新的数据更新它。我不能对path元素使用.data( data )函数，因为如果这样做，它将为每个svg上的每个数据元素创建一个路径。(例如，如果我有2个数据元素和3个svg元素，它将在每个svg上创建2个路径元素)。代码：
var arc = svg.append("path")
.attr({
"d": function (d, i) {
bronzeArc.endAngle((2 * Math.PI) * d.CurPct);
return bronzeArc();
}
});我尝试过移动svg.exit().remove()；，这对我没有任何帮助。有什么建议吗？
回答 1
Stack Overflow用户
回答已采纳
发布于 2016-05-06 13:08:01
您需要将append('path')调用移动到enter选择上。现在，您总是添加一个新的路径，即使一个已经存在。试着做这样的事情：
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攻击。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/37079677
复制
腾讯云开发者
