I have a static 3 level Sunburst diagram -
http://colinwhite.net/Sunburst/
My data is being nested with this function
http://colinwhite.net/Sunburst/js/treeRemapper.js
My approach is based on this example -
http://bl.ocks.org/mbostock/4348373
For some reason my zoom and tweening is not working -
var width = 960, height = 700,
radius = Math.min(width, height) / 2,
color = d3.scale.category20c();
var x = d3.scale.linear().range([0, 2 * Math.PI]),
y = d3.scale.sqrt().range([0, radius]);
var svg = d3.select("body").append("svg")
.attr("width", width)
.attr("height", height)
.append("g")
.attr("transform", "translate(" + width / 2 + "," + height * .52 + ")");
var partition = d3.layout.partition()
.size([2 * Math.PI, radius * radius])
.value(function(d) { return 1; });
var arc = d3.svg.arc()
.startAngle(function(d) { return d.x; })
.endAngle(function(d) { return d.x + d.dx; })
.innerRadius(function(d) { return Math.sqrt(d.y); })
.outerRadius(function(d) { return Math.sqrt(d.y + d.dy); });
d3.json("data/getJson.php", function(error, data) {
var treeData = genJSON(data, ['SourceID', 'ProviderID']);
var path = svg.selectAll("path")
.data(partition.nodes(treeData))
.enter().append("path")
.attr("d", arc)
.style("fill-rule", "evenodd")
.style("fill", function(d) { return color((d.children ? d : d.parent).name); })
.on("click", click);
function click(d) {
path.transition()
.duration(750)
.attrTween("d", arcTween(d));
}
});
function arcTween(d) {
var xd = d3.interpolate(x.domain(), [d.x, d.x + d.dx]),
yd = d3.interpolate(y.domain(), [d.y, 1]),
yr = d3.interpolate(y.range(), [d.y ? 20 : 0, radius]);
return function(d, i) {
return i
? function(t) { return arc(d); }
: function(t) { x.domain(xd(t)); y.domain(yd(t)).range(yr(t)); return arc(d); };
};
}
Can anyone tell me what I'm doing wrong?
The example you are quoting is based on the "rescaling"/"readjusting" x
and y
domain/ranges. In your example, you have defined an arc
that does not depend on the x
and y
scales, thus if you change these, there's no effect.
So what can you do?
First you need to take out the size
of the partition
(as you will handle that with scales):
var partition = d3.layout.partition()
//.size([2 * Math.PI, radius * radius])
.value(function(d) {
return 1;
});
(remove it, not comment it :) )
Next, you have to use and arc
that does depend on the scales, eg like in the example:
var arc = d3.svg.arc()
.startAngle(function(d) { return Math.max(0, Math.min(2 * Math.PI, x(d.x))); })
.endAngle(function(d) { return Math.max(0, Math.min(2 * Math.PI, x(d.x + d.dx))); })
.innerRadius(function(d) { return Math.max(0, y(d.y)); })
.outerRadius(function(d) { return Math.max(0, y(d.y + d.dy)); });
As you can see, the max
and min
are kind of squeezing the "hidden" segments...
Cross fingers, run it (I tried it with flare.json, it did work here)
Note
If you plan to also add reweighting when zoomed in, have a look at this nice example: http://bl.ocks.org/kerryrodden/477c1bfb081b783f80adof
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.