<%@ 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. org.apache.curator：master选举和分布式锁

    1. master选举(LeaderSelector) 1)LeaderSelector构造函数 在leaderPath上建立分布式锁:mutex = new InterProcessMutex(cl ...

  2. 树形DP+（分组背包||二叉树,一般树,森林之间的转换）codevs 1378 选课

    codevs 1378 选课 时间限制: 1 s  空间限制: 128000 KB  题目等级 : 钻石 Diamond  题目描述 Description 学校实行学分制.每门的必修课都有固定的学分 ...

  3. git -- git clone

    git clone 命令参数: usage: git clone [options] [--] <repo> [<dir>] -v, --verbose be more ver ...

  4. 《pyhton学习手册》 第33章 异常编码细节

    try/except/else语句 这些语句的一般的格式如下图所示 其中try中定义了主要执行的动作.except中定义了try语句当中发生异常的处理器.else定义了没有发生异常时候的处理器. tr ...

  5. 无法读取Excel中的数据单元格。有数据，但是读出来全是空值

    C#读取Excel,取值为空的解决办法! C#读取Excel遇到无法读取的解决方法是什么呢?这样在C#读取Excel的过程中有很多问题,那么本文就向你介绍如何解决C#读取Excel遇到无法读取的解决方 ...

  6. linux下使用crontab创建定时任务

    在linux中启动crontab服务: /etc/init.d/crond start crontab的命令格式 crontab -l 显示当前的crontab 文件(默认编写的crontab文件会保 ...

  7. Cocos2d-x3.0 解压zip

    2dx3.0为我们集成了unzip库,帮助我们实现对文件的解压,但使用起来略显复杂我这里封装了一个解压工具库.分享一下. 工具类下载:http://download.csdn.net/detail/q ...

  8. IPC low/medium/high density 什么意思？

    http://wiki.altium.com/pages/viewpage.action?pageId=3080344 Land Pattern Information Density Level A ...

  9. STN1170 Multiprotocol OBD to UART Interpreter

    http://www.obdsol.com/stn1170/ STN1170 supports the following protocols: all legislated OBD II proto ...

  10. BeanPostProcessor使用心得

    最近想对项目中的所有bean进行一个代理.然后监控bean得方法的使用情况.         刚开始想的方法是:重写项目的beanFactory,然后再getBean的使用,对结果object进行一个 ...