Я не могу решить, как лучше передать изменения в данные, которые происходят у родительского node (например, SVG g
), вплоть до него (например, SVG circle
).
Я читал этот и этот, но до сих пор не могу понять.
Вот минимальный рабочий пример. В примере предполагается, что у вас есть объект с именем svg
, который ссылается на выбор d3, содержащий элемент SVG.
data = [{"id":"A","name":"jim"},{"id":"B","name":"dave"},{"id":"C","name":"pete"}];
g = svg.selectAll("g").data(data, function(d) { return d.id; }).enter().append("g");
g.append("circle")
.attr("r", 3)
.attr("cx", 100)
.attr("cy", function(d,i) {return 100 + (i * 30);})
// The data gets passed down to the circles (I think):
console.log("circle data:");
d3.selectAll("g circle").each(function(d) { console.log(d.name); });
// Now change the data, and update the groups' data accordingly
data = [{"id":"A","name":"carol"},{"id":"B","name":"diane"},{"id":"C","name":"susan"}];
svg.selectAll("g").data(data, function(d) { return d.id;});
// These are the results of the change:
console.log("after change, the group has:");
d3.selectAll("g").each(function(d) { console.log(d.name); });
console.log("but the circles still have:");
d3.selectAll("g circle").each(function(d) { console.log(d.name); });
Может ли кто-нибудь помочь мне найти краткий способ получить новые имена во всех дочерних элементах группы? В моем реальном примере каждый g
содержит много circle
s.