D3.js 버블 차트에 거품이 나타나지 않는다.

일부 0 값을 포함 할 수있는 배열에 대해 D3 버블 차트를 표시하려고합니다. 0의 수가 높으면 거품이 사라집니다. (이 10 기포를 표시해야합니다)이 예를 참조하십시오 내가 뭔가 잘못하고 Example on jsfiddle D3.js 버블 차트에 거품이 나타나지 않는다.

암을?

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 

<html> 

<head> 
    <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1"> 
    <meta name="language" content="de"> 
    <title>Disappearing bubble Problem</title> 

    <meta http-equiv="Content-Script-Type" content="text/javascript"> 
    <script type="text/javascript" src="http://d3js.org/d3.v2.min.js"></script> 
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.8.3.min.js"></script> 

<script type='text/javascript'> 
$(document).ready(function(){ 
var r = 700 
var bubble_layout = d3.layout.pack() 
    .size([r,r]) 
    .padding(1.5); 

var vis = d3.select("#chart").append("svg") 
    .attr("width" , r) 
    .attr("height", r) 

var arr = [ 
    { name : '1', value: 1 } 
    ,{ name : '2', value: 1 } 
    ,{ name : '3', value: 1 } 
    ,{ name : '4', value: 1 } 
    ,{ name : '5', value: 1 } 
    ,{ name : '6', value: 1 } 
    ,{ name : '7', value: 1 } 
    ,{ name : '8', value: 1 } 
    ,{ name : '9', value: 1 } 
    ,{ name : '10', value: 1 } 
    ,{ name : '11', value: 0 } //Adding data elements with value 0 makes bubbles disappear 
    ,{ name : '12', value: 0 } 
    ,{ name : '13', value: 0 } 
    ,{ name : '14', value: 0 } 
    ,{ name : '15', value: 0 } 
    ,{ name : '16', value: 0 } 
    ,{ name : '17', value: 0 } 
    ,{ name : '18', value: 0 } 
    ,{ name : '19', value: 0 } 
    ,{ name : '20', value: 0 } 
    ,{ name : '21', value: 0 } 
    ,{ name : '22', value: 0 } 
    ,{ name : '23', value: 0 } 
    ,{ name : '24', value: 0 } 
    ,{ name : '25', value: 0 } 
    ,{ name : '26', value: 0 } 
    ,{ name : '27', value: 0 } 
    ,{ name : '28', value: 0 } 
    ,{ name : '29', value: 0 } 
    ,{ name : '30', value: 0 } 
    ,{ name : '31', value: 0 } 
    ,{ name : '32', value: 0 } 
    ,{ name : '33', value: 0 } 
    ,{ name : '34', value: 0 } 
    ,{ name : '35', value: 0 } 
    ,{ name : '36', value: 0 } 
]; 

var selection = vis.selectAll("g.node") 
       .data(bubble_layout.nodes({children: arr}).filter(function(d) { return !d.children; })); 

//Enter 
node = selection.enter().append("g") 
       .attr("class", "node") 
       .attr("transform", function(d) { return "translate(" + d.x + ", " + d.y + ")"; }); 

node.append("circle") 
    .attr("r", function(d) { return d.r; }) 
    .style("fill", function(d) { return 'aaaaaa'; }); 

node.append("text") 
    .attr("text-anchor", "middle") 
    .attr("dy", ".3em") 
    .text(function(d) { return d.name; }); 

}); 
</script> 

</head> 

<body> 
    <span id='chart'> 
</body> 

</html>

출처

2012-11-22 user1844288

서클이 사라지지 않고 렌더링되지만 다른 사람들이 적용됩니다.

팩 레이아웃의 정렬 순서를 오름차순이 아닌 다른 기본값으로 변경할 수 있습니다. 당신이 영 (0)의 반지름을 가진 원을 만드는 피하기 위해 0보다 큰 값을 가진 항목 만 포함하도록 선택을 필터링 할 수 있습니다, 또한

var bubble_layout = d3.layout.pack() 
         .sort(null) // <-- HERE 
         .size([r,r]) 
         .padding(1.5);

null로 설정 될 수있다.

var node = selection.enter().append("g") 
        .attr("class", "node") 
        .attr("transform", function(d) { 
         return "translate(" + d.x + ", " + d.y + ")"; 
        }) 
        .filter(function(d){  
         return d.value > 0; // <-- HERE 
        })

는 JSFiddle 업데이트 : http://jsfiddle.net/jaimem/WWxqh/4/

당신이 value 속성을 변경해야 균일 한 모양을 방지하기 위해, d3.js가 마법을 할 그것을 사용하기 때문에. 이 바이올린을 확인하십시오 : http://jsfiddle.net/jaimem/WWxqh/5/

출처

2012-11-23 00:49:13 jaime

D3.js 버블 차트에 거품이 나타나지 않는다.

답변

관련 문제