- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="utf-8" />
- <script type="text/javascript" src1="js/d3.js"></script>
- </head>
- <body>
- </body>
- <script type="text/javascript">
- var svg = d3.select("body")
- .append("svg")
- .attr("width", 500)
- .attr("height", 100);
- var dataset1 = [ [5, 20], [480, 90], [250, 50], [100, 33], [130, 95]];
- var dataset2=[[5, 20], [230, 90], [250, 50], [32, 33], [230, 95],[130, 95]];
- var dataset3=[[5, 20], [120, 90], [450, 60], [132, 83], [230, 95],
- [210, 22], [22, 77], [25, 24], [85, 21], [35, 88]];
- var dataset=[];
- var i=0;
- function changeDataSet(){
- if(i%2==0){
- dataset=dataset1;
- }else{
- dataset=dataset2;
- }
- i++;
- console.log(i);
- }
- function drawCircle(){
- var circles=svg.selectAll("circle").data(dataset);
- circles.attr({'cx':function(d){
- return d[0];
- },'cy':function(d){
- return d[1];
- },'r':function(d){
- return Math.sqrt(100 - d[1]);
- }}).enter().append("circle")
- .attr({'cx':function(d){
- return d[0];
- },'cy':function(d){
- return d[1];
- },'r':function(d){
- return Math.sqrt(100 - d[1]);
- }});
- circles.exit().remove();
- }
- svg.selectAll("circle").data(dataset3)
- .enter()
- .append("circle")
- .attr("cx", function(d) {
- return d[0];
- }).attr("cy", function(d) {
- return d[1];
- }).attr("r", function(d) {
- return Math.sqrt(100 - d[1]);
- });
- setInterval(function(){
- changeDataSet();
- drawCircle();
- },2000);
- var matrix = [
- [11975, 5871, 8916, 2868],
- [ 1951, 10048, 2060, 6171],
- [ 8010, 16145, 8090, 8045],
- [ 1013, 990, 940, 6907]
- ];
- var tr = d3.select("body").append("table")
- .selectAll("tr")
- .data(matrix)
- .enter().append("tr");
- var td = tr.selectAll("td")
- .data(function(d) { console.log('td: ',d); return d; })
- .enter().append("td")
- .text(function(d) {console.log('text: ',d); return d; });
- </script>
- </html>
- //该片段来自于http://www.codesnippet.cn/detail/2608201410326.html
来源: http://www.codesnippet.cn/detail/2608201410326.html