arrays - D3 ,update to a two level element -
i've stuck in problem several days, hope can me out here,thanks
the things i'm trying
i have bunch of links grouped according nodes related
the svg
<g class = "edge" > <path d="m 10,20l 176.04599778748948,300.5015249766384" ></path> <path d="m 30,40l 176.04599778748948,300.5015249766384" ></path> </g> <g class = "edge" > <path d="m 50,60l 176.04599778748948,300.5015249766384" ></path> <path d="m 70,80l 176.04599778748948,300.5015249766384" ></path> </g>
and data set
var nodes = [ [" start", null, 0, [ ["home", 1711, 1] ]], ["home", null, 4.279281698e9, [ [" stop", 1173, 1] ]], [" stop", null, 0, []] ]; var layout = [ [100, 200,10], [300, 300,50], [50, 50,10] ];
i try init edges:
var svg_edges = svg.append("g").attr("class", style.edges) .selectall("g") .data(nodes,function(d){ return d[0];}).enter().append("g").selectall("path") .data(function(d) { return d[3]; },function(d){return d[0]}) svg_edges.enter().append("path") drawedge(svg_edges,false); /* exit. */ svg_edges.exit().remove();
then want update these group of edges
function update (){ edges = svg.select("g." + style.edges).selectall("g").data(nodes,function(d){ return d[0];}) edges = edges.selectall("path").data(function(d){ return d[3]},function(d){return d[0]}) edges.enter().append("path") drawedge(edges,true) edges.exit().remove(); }
and update didn't work,it adds or delete half of links, before, try update nested selection,thanks ~~
=============================== finally, find solution here
/* update edges. */ group = svg.select("g." + style.edges).selectall("g").data(nodes,function(d){ return d[0];}); edges1=group.enter().append("g").selectall("path").data(function(d){return d[3]}) edges2=group.selectall("path").data(function(d){return d[3]}) edges1.enter().append("path") edges2.enter().append("path") drawedge(edges1,true) drawedge(edges2,true) edges1.exit().remove(); edges2.exit().remove(); group.exit().remove();
you can access index of higher-level data additional argument functions set attributes etc. is, instead of function(d, i)
d
current data element , i
current index, can use function(d, i, j)
j
index of current data element @ higher level.
you can use index retrieve relevant higher-level data. code this:
svg_edges.enter().append("path") .attr("id", function(d, i, j) { return "g-" + j + "-path-" + i; });
full example here.
Comments
Post a Comment