circle-pack

I have a diagram very similar to circle packing At some point, a user wants to see some different data. Obviously, a different diagram can be displayed immediately, but transition would be much better from perception and cognition point of view. NOTE: The hierarchical structure remains the same, there is no new or deleted nodes, just underlying values that determine circle size change. What would be the good way to implement such smooth transition between two circle pack graphs of the same structure but different values? (Of course, during transition, that lets say lasts 10 sec, there is no

I've been toying around with the circle pack sample . However, I have a lot of trouble trying to update the thing from a new set of JSON data and refreshing it afterwards. My code is just a modified version of the circle pack sample: var diameter = 960, format = d3.format(",d"); var pack = d3.layout.pack() .size([diameter - 4, diameter - 4]) .value(function(d) { return d.size; }); var svg = d3.select("body").append("svg") .attr("width", diameter) .attr("height", diameter) .append("g") .attr("transform", "translate(2,2)"); var node; d3.json("data1.json", function(error, root) { node = svg.datum

I have implemented the following graph with the edges rendered with d3.svg.diagonal(). However, when I try substituting the diagonal with d3.svg.line(), it doesn't appear to pull the target and source data. What am I missing? Is there something I don't understand about d3.svg.line? The following is the code I am referring to, followed by the full code: var line = d3.svg.line() .x(function(d) { return d.lx; }) .y(function(d) { return d.ly; }); ... var link= svg.selectAll("path") .data(links) .enter().append("path") .attr("d",d3.svg.diagonal()) .attr("class", ".link") .attr("stroke", "black")