Javascript D3.js在气泡图中消失气泡_Javascript_Svg_D3.js_Circle Pack

Javascript D3.js在气泡图中消失气泡

javascript svg d3.js

Javascript D3.js在气泡图中消失气泡,javascript,svg,d3.js,circle-pack,Javascript,Svg,D3.js,Circle Pack,我试图为一个数组显示一个D3气泡图，该数组可以包含一些0值。如果0的数量达到高位，气泡开始“消失”。请参见此示例（它应显示10个气泡）：我做错什么了吗 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="content-typ

我试图为一个数组显示一个D3气泡图，该数组可以包含一些0值。如果0的数量达到高位，气泡开始“消失”。请参见此示例（它应显示10个气泡）：

我做错什么了吗

<!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>


消失的泡沫问题
$（文档）.ready（函数（）{
var r=700
var bubble_layout=d3.layout.pack（）
.尺寸（[r，r]）
.填充（1.5）；
var vis=d3.选择（“图表”）.追加（“svg”）
.attr（“宽度”，r）
.attr（“高度”，r）
var arr=[
{name:'1'，值：1}
，{name:'2'，值：1}
，{name:'3'，值：1}
，{name:'4'，值：1}
，{name:'5'，值：1}
，{name:'6'，值：1}
，{name:'7'，值：1}
，{name:'8'，值：1}
，{name:'9'，值：1}
，{name:'10'，值：1}
，{name:'11'，value:0}//添加值为0的数据元素会使气泡消失
，{name:'12'，值：0}
，{name:'13'，值：0}
，{name:'14'，值：0}
，{name:'15'，值：0}
，{name:'16'，值：0}
，{name:'17'，值：0}
，{name:'18'，值：0}
，{name:'19'，值：0}
，{name:'20'，值：0}
，{name:'21'，值：0}
，{name:'22'，值：0}
，{name:'23'，值：0}
，{name:'24'，值：0}
，{name:'25'，值：0}
，{name:'26'，值：0}
，{name:'27'，值：0}
，{name:'28'，值：0}
，{name:'29'，值：0}
，{name:'30'，值：0}
，{name:'31'，值：0}
，{name:'32'，值：0}
，{name:'33'，值：0}
，{name:'34'，值：0}
，{name:'35'，值：0}
，{name:'36'，值：0}
];
var selection=vis.selectAll（“g.node”）
.data（bubble_layout.nodes（{children:arr}）.filter（函数（d）{return！d.children；}））；
//进入
node=selection.enter（）.append（“g”）
.attr（“类”、“节点”）
.attr（“transform”，函数（d）{return“translate”（“+d.x+”，“+d.y+”）”）；}）；
node.append（“圆”）
.attr（“r”，函数（d）{返回d.r；}）
.style（“fill”，函数（d）{返回'aaaaaa'；}）；
node.append（“文本”）
.attr（“文本锚定”、“中间”）
.attr（“dy”，“.3em”）
.text（函数（d）{返回d.name；}）；
} );

您的圆不会消失，它们会被渲染，但会被其他圆覆盖

您可以将包布局的排序顺序更改为升序以外的其他顺序，这是默认设置。它可以设置为null

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

var bubble\u layout=d3.layout.pack（）
.sort（null）//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 
                    })