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

你的圈子不會消失，它們被渲染但被其他人覆蓋。

您可以將包佈局的排序順序更改爲升序以外的值 - 這是默認值。它可以被設置爲null

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

此外，您可能要篩選您的選擇，只包括與大於0的價值的物品，以避免與零個半徑創建圓。

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氣泡圖中消失的氣泡

回答

相關問題