Charts D3分区图中的重叠标签

我基本上一直在尝试实现可缩放分区图来描述预算器的向下搜索。我的问题是，我想隐藏最低的分区，并且仅当父分区被单击或以缩放方式显示时才显示

当显示所有最低的分区时，它们是重叠的，文本也是重叠的。我希望它们只在单击第三个分区时显示

如果这是不可能的，我希望至少在较低的分区内的文本被隐藏，直到其缩放。 有没有办法做到这一点。 我一直在尝试使用不透明度，但它不工作 下面是我的实现

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 + ")";
}

---

您将显示两个堆叠在一起的标签。因此，您需要将不透明度检查减半：

return d.dx * ky / 2 > 12 ? 1 : 0;

或双倍：

return d.dx * ky > 24 ? 1 : 0;

代码如下：

---

如果你能提供一些测试数据，那就太好了。{“姓名”：“总计”，“儿童”：[{“姓名”：“心血管疾病”，“儿童”：[{“姓名”：“α-突触核蛋白”，“儿童”：[{“姓名”：“目标验证”，“大小”：40，“预算”：1000000，“颜色”：“#B0662E”}，{“姓名”：“综合毒性剂量”，“大小”：40，“预算”：250000，“颜色”：“#CC6666”}，{“名称”：“ADME#U 123”，“大小”：40，“预算”：64333，“颜色”：“名称”：“ADME#U 12”，“大小”：40，“预算”：65444，“颜色”：“预算”：4650000，“颜色”：“颜色”：“预算”：711616842，“颜色”：“预算”：711616842，“颜色”：“预算”：711616842，“颜色”：“预算”：711616842，“颜色”：