100 layout(c); |
100 layout(c); |
101 }); |
101 }); |
102 } |
102 } |
103 } |
103 } |
104 |
104 |
|
105 function position() { |
|
106 return this.style("width", function(d) { return x(d.x + d.dx) - x(d.x) + 'px'; }) |
|
107 .style("height", function(d) { return y(d.y + d.dy) - y(d.y) + 'px'; }) |
|
108 .style("left", function(d) { return x(d.x) + 'px'; }) |
|
109 .style("top", function(d) { return y(d.y) + 'px'; }); |
|
110 } |
|
111 |
105 function display(d) { |
112 function display(d) { |
106 breadcrumbs |
113 breadcrumbs |
107 .datum(d.parent) |
114 .datum(d.parent) |
108 .html(name(d)) |
115 .html(name(d)) |
109 .on("click", transition); |
116 .on("click", transition); |
116 .data(d._children) |
123 .data(d._children) |
117 .enter() |
124 .enter() |
118 .append("div"); |
125 .append("div"); |
119 |
126 |
120 node.attr("class", "node") |
127 node.attr("class", "node") |
121 .style("width", function(d) { return x(d.x + d.dx) - x(d.x) + 'px'; }) |
128 .call(position) |
122 .style("height", function(d) { return y(d.y + d.dy) - y(d.y) + 'px'; }) |
|
123 .style("left", function(d) { return d.x + 'px'; }) |
|
124 .style("top", function(d) { return d.y + 'px'; }) |
|
125 .on("click", selectHandler); |
129 .on("click", selectHandler); |
126 |
130 |
127 node.filter(function(d) { return d._children; }) |
131 node.filter(function(d) { return d._children; }) |
128 .classed("children", true) |
132 .classed("children", true) |
129 .on("click", transition); |
133 .on("click", transition); |
137 } |
141 } |
138 |
142 |
139 selectHandler(d); |
143 selectHandler(d); |
140 transitioning = true; |
144 transitioning = true; |
141 |
145 |
142 var newNodes = display(d), |
146 var newNode = display(d), |
143 transitionNodes = nodes.transition().duration(750), |
147 transitionNodes = node.transition().duration(750), |
144 transitionNewNodes = newNodes.transition().duration(750); |
148 transitionNewNodes = newNode.transition().duration(750); |
145 |
149 |
146 x.domain([d.x, d.x + d.dx]); |
150 x.domain([d.x, d.x + d.dx]); |
147 y.domain([d.y, d.y + d.dy]); |
151 y.domain([d.y, d.y + d.dy]); |
148 |
152 |
149 element.style("shape-rendering", null); |
153 element.style("shape-rendering", null); |
150 |
154 |
151 element.selectAll(".nodes").sort(function(a, b) { return a.depth - b.depth; }); |
155 element.selectAll(".node").sort(function(a, b) { return a.depth - b.depth; }); |
152 |
156 |
153 newNodes.selectAll("text").style("fill-opacity", 0); |
157 newNode.selectAll().style("fill-opacity", 0); |
154 |
158 |
155 transitionNodes.style("fill-opacity", 0) |
159 transitionNodes.style("opacity", 0) |
156 .style("width", function(d) { return x(d.x + d.dx) - x(d.x) + 'px'; }) |
160 .call(position); |
157 .style("height", function(d) { return y(d.y + d.dy) - y(d.y) + 'px'; }) |
|
158 .style("left", function(d) { return x(d.x) + 'px'; }) |
|
159 .style("top", function(d) { return y(d.y) + 'px'; }) |
|
160 .attr("fill", function(d) { return (d.color || "#bbb"); }); |
|
161 |
161 |
162 transitionNewNodes.style("fill-opacity", 1) |
162 transitionNewNodes.style("opacity", 1) |
163 .style("width", function(d) { return x(d.x + d.dx) - x(d.x) + 'px'; }) |
163 .call(position); |
164 .style("height", function(d) { return y(d.y + d.dy) - y(d.y) + 'px'; }) |
|
165 .style("left", function(d) { return x(d.x) + 'px'; }) |
|
166 .style("top", function(d) { return y(d.y) + 'px'; }) |
|
167 .attr("fill", function(d) { return (d.color || "#bbb"); }); |
|
168 |
164 |
169 transitionNodes.remove().each("end", function() { |
165 transitionNodes.remove().each("end", function() { |
170 element.style("shape-rendering", "crispEdges"); |
166 element.style("shape-rendering", "crispEdges"); |
171 transitioning = false; |
167 transitioning = false; |
172 }); |
168 }); |