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

Popular posts from this blog

java - activate/deactivate sonar maven plugin by profile? -

python - TypeError: can only concatenate tuple (not "float") to tuple -

java - What is the difference between String. and String.this. ? -