首页 > 代码库 > D3js-对柱状图的增，删，排序

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

2024-09-17 06:49:04   218人阅读

<%@ 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="http://www.mamicode.com/">
    
    <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="http://www.mamicode.com/styles.css">
-->
  </head>
  
  <body>
  <script type="text/javascript" src="http://www.mamicode.com/js/d3/d3.js"></script>
<script type="text/javascript" src="http://www.mamicode.com/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-对柱状图的增，删，排序


联系
我们