I have been basically trying to implement the zoomable partition chart for depicting the budger drill down.My problem is that I want to hide the lowest parition and shown only when the parent partition is clicked or displayed in zoom.
When all the lowest partitions are displayed they are overlapped and the text is also over lapped.I want them to be displayed only when clicked on the third partition.
If this is not possible i want atleast the text withint the lower partition to be hidden until its zoomed . Is there a way that this can be achieved. I have been trying to use opacity but it doesn't work Below is the piece of my implementations
function d3ChartGeneration(){
w = 900;
h = 600;
h = 900;
x = d3.scale.linear().range([0, w]);
y = d3.scale.linear().range([0, h]);
vis = d3.select("#budgetDrillDown").append("div")
.attr("class", "chart")
.style("width", w + "px")
.style("height", h + "px")
.append("svg:svg")
.attr("width", w)
.attr("height", h);
partition = d3.layout.partition()
.value(function(d) { return d.size; })
.sort(function(a, b) { return a.name.toLowerCase().localeCompare(b.name.toLowerCase()); });
chartGeneration();
}
function chartGeneration(){
var root=JSON.parse(jsonString);
g = vis.selectAll("g")
.data(partition.nodes(root))
.enter().append("svg:g")
.attr("transform", function(d) { return "translate(" + x(d.y) + "," + y(d.x) + ")"; })
.on("click", click);
kx = w / root.dx;
ky = h / 1;
g.append("svg:rect")
.attr("width", root.dy * kx)
.attr("height", function(d) { return d.dx * ky; })
.attr("class", function(d) { return d.children ? "parent" : "child"; })
.style("fill", function (d) { return d3.rgb(d.color); });
//.filter(function(d) { return d.depth > 2; })
//.style("display", "none");
g.append("svg:text")
.attr("transform", transform)
.attr("dy", ".20em")
.style("opacity", function(d) { return d.dx * ky > 12 ? 1 : 0; })
.append("tspan")
.attr("x","0")
.attr("y","-0.5")
.text(function(d) { return d.name; })
//.style( "display",function(d) { if( d.depth > 1) return "none"; })
.append("tspan")
.attr("x","0")
.attr("y","12")
.text(function(d) { return ((d.budget/1000000).toFixed(2)+' M'); });
//.style( "display",function(d) { if( d.depth > 1) return "none"; });
d3.select("window")
.on("click", function() { click(root); });
}
function click(d) {
if (!d.children) return;
kx = (d.y ? w - 40 : w) / (1 - d.y);
ky = h / d.dx;
x.domain([d.y, 1]).range([d.y ? 40 : 0, w]);
y.domain([d.x, d.x + d.dx]);
var t = g.transition()
.duration(d3.event.altKey ? 7500 : 750)
.attr("transform", function(d) { return "translate(" + x(d.y) + "," + y(d.x) + ")"; });
t.select("rect")
.attr("width", d.dy * kx)
.attr("height", function(d) { return d.dx * ky; })
.style( "display",function(d) { if( d.depth > 2) return "";});
t.select("text")
.attr("transform", transform)
.style("opacity", function(d) { return d.dx * ky > 12 ? 1 : 0; });
//.style("display", "inherit");
d3.event.stopPropagation();
}
function transform(d) {
return "translate(8," + d.dx * ky / 2 + ")";
}
