我基本上一直在尝试实现可缩放的分区图来描绘预算器向下钻取。我的问题是我想隐藏最低的分区并仅在单击父分区或以缩放方式显示时才显示。
当显示所有最低分区时，它们重叠并且文本也重叠。我希望它们仅在单击第三个分区时显示。
如果这是不可能的，我希望至少隐藏下部分区内的文本，直到其缩放。有没有办法可以实现这一点。我一直在尝试使用不透明度，但它不起作用下面是我的实现部分
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 + ")";
}