<%@ 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-对柱状图的增，删，排序的更多相关文章

  1. python基础中的四大天王-增-删-改-查

    列表-list-[] 输入内存储存容器 发生改变通常直接变化,让我们看看下面列子 增---默认在最后添加 #append()--括号中可以是数字,可以是字符串,可以是元祖,可以是集合,可以是字典 #l ...

  2. C# ADO.NET (sql语句连接方式)(增,删,改)

    using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.We ...

  3. 好用的SQL TVP~~独家赠送[增-删-改-查]的例子

    以前总是追求新东西,发现基础才是最重要的,今年主要的目标是精通SQL查询和SQL性能优化.  本系列主要是针对T-SQL的总结. [T-SQL基础]01.单表查询-几道sql查询题 [T-SQL基础] ...

  4. iOS FMDB的使用(增,删,改,查,sqlite存取图片)

    iOS FMDB的使用(增,删,改,查,sqlite存取图片) 在上一篇博客我对sqlite的基本使用进行了详细介绍... 但是在实际开发中原生使用的频率是很少的... 这篇博客我将会较全面的介绍FM ...

  5. iOS sqlite3 的基本使用(增 删 改 查)

    iOS sqlite3 的基本使用(增 删 改 查) 这篇博客不会讲述太多sql语言,目的重在实现sqlite3的一些基本操作. 例:增 删 改 查 如果想了解更多的sql语言可以利用强大的互联网. ...

  6. ADO.NET 增 删 改 查

    ADO.NET:(数据访问技术)就是将C#和MSSQL连接起来的一个纽带 可以通过ADO.NET将内存中的临时数据写入到数据库中 也可以将数据库中的数据提取到内存中供程序调用 ADO.NET所有数据访 ...

  7. MVC EF 增 删 改 查

    using System;using System.Collections.Generic;using System.Linq;using System.Web;//using System.Data ...

  8. 第18课-数据库开发及ado.net 连接数据库.增.删.改向表中插入数据并且返回自动编号.SQLDataReade读取数据

    第18课-数据库开发及ado.net 连接数据库.增.删.改向表中插入数据并且返回自动编号.SQLDataReade读取数据 ADO.NET 为什么要学习? 我们要搭建一个平台(Web/Winform ...

  9. django ajax增 删 改 查

    具于django ajax实现增 删 改 查功能 代码示例: 代码: urls.py from django.conf.urls import url from django.contrib impo ...

  10. StringBuilder修改字符串内容，增,删,改,插

    package seday01;/** * 字符串不变对象特性只针对字符串重用,并没有考虑修改操作的性能.因此String不适合频繁修改内容. * 若有频繁修改操作,使用StringBuilder来完 ...

随机推荐

  1. hdu 3572 资源分配

    资源分配,每个时间点有m个机器可用,要将这资源分配给n个任务中的一些,要求每个任务在自己的时间范围中被分配了p[i]个资源,建图: 建立源,与每个时间点连边,容量为m,每个任务向其对应的时间段中的每个 ...

  2. JAVA容器-重点总结与深度解析

    重点内容总结 问题思考 问题思考解析

  3. iOS开发读取plist文件、iphone中plist文件的

    在Xcode中建立一个iOS项目后,会自己产生一个.plist文件,点击时会看见它显示的是类似于excel表格: 但是,如果打开方式选择Source Code,你会看见它其实是一个xml文件. 我们会 ...

  4. loading(正在加载特效)

    <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...

  5. Win8系统108个运行命令 你能记住多少?

    Win8运行命令:程序和功能   取消了开始菜单的Win8让人感觉很不习惯,这才发现原来开始菜单可以做这么多事.不过Win8中的一些快捷键还沿用了Windows一直以来的习惯,比如按下Windows ...

  6. 内核镜像zImage是如何生成的

    转载:内核镜像zImage是如何生成的 内核镜像zImage是如何生成的 前面两篇文章介绍了vmlinux 文件生成,这个文件必然是核心的linux内核,但是它是ELF格式的文件,其中包含了可执行的二 ...

  7. java集合（ArrayList,Vector,LinkedList,HashSet,TreeSet的功能详解）

    说起集合,我们会潜意识里想到另外一个与之相近的名词——数组,OK!两者确实有相似之处,但也正是这点才是我们应该注意的地方,下面简单列出了两者的区别(具体功能的不同学习这篇文章后就会明白了): 数组 长 ...

  8. ICLR 2014 International Conference on Learning Representations深度学习论文papers

    ICLR 2014 International Conference on Learning Representations Apr 14 - 16, 2014, Banff, Canada Work ...

  9. （转载）iPhone开发视频教程 Objective-C部分 （51课时）

      感谢好人的无私贡献!来源:http://www.cnblogs.com/aimeng/p/3370012.html   第一.二章  OC基础语法 iPhone开发教程 第一章 OC基础语法  i ...

  10. go语言基础之流程控制 if语句

    Go语言支持最基本的三种程序运行结构:顺序结构.选择结构.循环结构. 顺序结构:程序按顺序执行,不发生跳转. 选择结构:依据是否满足条件,有选择的执行相应功能. 循环结构:依据条件是否满足,循环多次执 ...