파티션 차트에서 D3 겹치는 레이블

Question

기본적으로 budger 드릴 다운을 묘사하는 확대/축소 가능 파티션 차트를 구현하려고했습니다. 내 문제는 부모 파티션을 클릭하거나 표시 할 때만 가장 낮은 분할을 숨기고 싶다는 것입니다. 줌.

가장 낮은 파티션이 모두 표시되면 겹치기도하고 텍스트가 랩핑 된 것입니다. 세 번째 파티션을 클릭 할 때만 표시되기를 원합니다.

이것이 가능하지 않다면 나는 아래쪽 파티션이있는 텍스트를 확대 할 때까지 숨길 필요가 있습니다. 이 방법을 사용할 수 있습니까? 내가 불투명도를 사용하는 것을 시도하고있다지만 작동하지 않습니다 다음은 서로의 위에 쌓인 두 개의 레이블을 표시하는 내 구현

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

Answer 1

의 작품이다. 그래서 당신은 절반 불투명 확인해야합니다

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

또는 더블 : 당신은 몇 가지 테스트 데이터를 제공 할 수 있는지

http://vida.io/documents/dg3izzdpu7K4SrG6c