码迷,mamicode.com
首页 > 编程语言 > 详细

D3js-对柱状图的增,删,排序

时间:2015-07-01 18:16:50      阅读:154      评论:0      收藏:0      [点我收藏+]

标签:d3js   柱状图   增加   排序   删除   

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
    
    <title>D3 增加 删除 排序 柱状图</title>
    
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">    
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<!--
<link rel="stylesheet" type="text/css" href="styles.css">
-->
  </head>
  
  <body>
  <script type="text/javascript" src="js/d3/d3.js"></script>
<script type="text/javascript" src="js/d3/d3.min.js"></script>

   <script type="text/javascript">
   
    //定义变量
    var width =1000;
    var height=600;
   
    var dataset=[];
   
    var svg = d3.select("body").append("svg")
    .attr("width".width)
    .attr("height",height);
   
  for(var i=0;i<5;i++)
  {
  dataset[i]=Math.floor(Math.random()*100);
  }
   
  console.log(dataset);
  //外边框
  var padding={top:20,right:20,bottom:20,left:20};
  //矩形宽度 包括空白
  var rectStep=35;
  //矩形宽度 不包括空白
  var rectWidth=30;  
 
  //绘制矩形
  function draw()
  {
  //1-----------------------------------
  //获取矩形updata部分
  var updateRect = svg.selectAll("rect")
  .data(dataset);
 
  //获取矩形的enter部分
  var enterRect =updateRect.enter();
 
  //获取矩形的exit部分
  var exitRect =updateRect.exit();
 
  //获取矩形update方法的处理
  updateRect.attr("fill","steelblue")
  //矩形坐标
   .attr("x",function(d,i)
   {
    return padding.left+i*rectStep;
   })
   .attr("y",function(d,i)
   {
    return height-padding.bottom-d;
   })
   //矩形的高宽
   .attr("width",rectWidth)
   .attr("height",function(d,i)
   {
    return d;
   });
  //获取矩形 enter方法的处理
  enterRect.append("rect")
  .attr("fill","steelblue")
  //矩形坐标
   .attr("x",function(d,i)
   {
    return padding.left+i*rectStep;
   })
   .attr("y",function(d,i)
   {
    return height-padding.bottom-d;
   })
   //矩形的高宽
   .attr("width",rectWidth)
   .attr("height",function(d,i)
   {
    return d;
   });
   
  //获取矩形exit方法的处理
  exitRect.remove();
 
  //2--------------------------------------
 
  //获取文字update的处理
  var updateText = svg.selectAll("text")
  .data(dataset);
 
  var enterText = updateText.enter();
 
  var exitText = updateText.exit();
 
 
  updateText.attr("fill","white")
  .attr("font-size","14px")
  .attr("text-anchor","middle")
  .attr("x",function(d,i)
  {
  return padding.left+i*rectStep;
  })
  .attr("y",function(d,i)
  {
  return height-padding.bottom-d;
  })
  .attr("dx",rectWidth/2)
  .attr("dy","1em")
  .text(function(d,i)
  {
  return d;
  });
  enterText.append("text")
  .attr("fill","white")
  .attr("font-size","14px")
  .attr("text-anchor","middle")
  .attr("x",function(d,i)
  {
  return padding.left+i*rectStep;
  })
  .attr("y",function(d,i)
  {
  return height-padding.bottom-d;
  })
  .attr("dx",rectWidth/2)
  .attr("dy","1em")
  .text(function(d,i)
  {
  return d;
  });
 
  exitText.remove();
  }
 
 
  //调用绘图函数
  draw();
 
  //排序
  function sortData()
  {
  dataset.sort(d3.ascending);
  draw();
  }
 
  //增加
  function addData()
  {
  dataset.push(Math.floor(Math.random()*100));
  draw();
  }
  //删除
  function deleteData()
  {
  //选中所有条
  dataset.shift();
  var bars = svg.selectAll("rect")
  .data(dataset);
 
  bars.exit()  
  .remove();
  draw();
  }
   </script>
    
    <br/>
    <div>
<button type="button" onclick="sortData()">排序</button>
<button type="button" onclick="addData()">增加</button>
<button type="button" onclick="deleteData()">删除</button>

</div>
  </body>

</html>


参考 网站:http://www.ourd3js.com/wordpress/?p=841

http://blog.csdn.net/tianxuzhang/article/details/14086627


版权声明:本文为博主原创文章,未经博主允许不得转载。

D3js-对柱状图的增,删,排序

标签:d3js   柱状图   增加   排序   删除   

原文地址:http://blog.csdn.net/u013147600/article/details/46712477

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!