d3.js - Inserting nodes into D3 pack layout (pagination on zoom) -

how can add additional nodes d3.js pack layout when has been created , being displayed in svg element? recalculating entire pack option, insertation more seamless.

what looking pack().addnode() function allows me insert additional children nodes existing leaf node. when user zoomes in leaf node, leaf node supposed turn parent node , display inserted nodes children.

please take at fiddle here. node called subnode_jane should receive children in subnode_subnodes new children.

var subnode_subnodes = [{     "name": "janesdaughter",     "size": 1030 }, {     "name": "janesson",     "size": 12000 }];  function zoom(d) {     var focus0 = focus;     focus = d;      if (d.name === "subnode_jane") {         alert("oh see subnode_jane has unpaginated children; insert them now!");     }  /* ... */ } 

optional: while doing so, nice if overall appearance of original nodes remain quite same. thanks!

related: update layout.pack in d3.js

please find workaround solution here. (workaround because not able code extension function of d3 pack layout)

my solution create second "virtual" pack , use circle coordinates integration in original pack. works me.

// hard-coded function var virtualnodesbyparentnode = function (d3nodeparentelement, nodechildrenelementarray) {     root.children[0].children[0].children = subnode_subnodes;     // need because otherwise, parent node object changed     var d3nodeparentelementclone = clone(d3nodeparentelement);     var pack = d3.layout.pack()         .padding(2)          // -1 important avoid edge overlap         .size([d3nodeparentelementclone.r * 2 - 1, d3nodeparentelementclone.r * 2 - 1])         .value(function (d) {     return d.size;         });     d3nodeparentelementclone.children = nodechildrenelementarray;     var nodes = pack.nodes(d3nodeparentelementclone)     // absolute x,y coordinates calculation     var curchildnode;     (var = 1; < nodes.length; i++) {         curchildnode = nodes[i];         curchildnode.x = curchildnode.x - nodes[0].x + d3nodeparentelement.x;         curchildnode.y = curchildnode.y - nodes[0].y + d3nodeparentelement.y;         curchildnode.depth = d3nodeparentelement.depth + 1;         curchildnode.parent = d3nodeparentelement;     }     nodes.splice(0, 1);     return nodes; }; 

the if condition within zoom function:

if (d.name === "subnode_jane" && done === 0) {     done = 1;     var virtualnodes = virtualnodesbyparentnode(d, subnode_subnodes);     d.children = virtualnodes;     // http://stackoverflow.com/a/5081471/2381339     nodes.push.apply(nodes, virtualnodes);     circle = svg.selectall("circle")         .data(nodes)         .enter().append("circle")         .attr("class", function (d) {         return d.parent ? d.children ? "node" : "node node--leaf" : "node node--root";     })         .style("fill", function (d) {         return "red";     })         .on("click", function (d) {         if (focus !== d) zoom(d), d3.event.stoppropagation();     });     text.remove();     text = svg.selectall("text")         .data(nodes)         .enter().append("text")         .attr("class", "label")         .style("fill-opacity", function (d) {         return d.parent === root ? 1 : 0;     })         .style("display", function (d) {         return d.parent === root ? null : "none";     })         .text(function (d) {         return d.name;     });     circle = svg.selectall("circle");     node = svg.selectall("circle,text");     // zoom current focus again (do transformation of updated elements)     zoomto(view);     return zoom(d); }