<%@ 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. [USACO08JAN]Cell Phone Network

    题目大意: 给你一个n个结点的树,请你搞一些破坏. 你可以选择手动弄坏某个点,那么与它直接相连的点也会自动坏掉. 问你把整棵树搞坏至少要手动弄坏几个点? 思路: f[0~2][i]表示不同状态下以i为 ...

  2. PHP文件上传学习

    PHP文件上传学习 <?php // 判断是否有文件上传 if (!isset($_FILES['upfile'])) { die('No uploaded file.'); } // 判断是否 ...

  3. Hive伪分布式下安装

    本安装过程只作为个人笔记用,非标准教程,请酌情COPY.:-D Hive下载 下载之前,需先查看兼容的Hadoop版本,并安装hadoop,参考 http://www.cnblogs.com/yong ...

  4. 请不要乱用Kotlin ? 空检查

    直接上实例: fun main(args: Array<String>) { println("now, begin save data to database") v ...

  5. word2007-2010排版中解决段后插入分页符 新页首行空行问题

    word2007-2010排版中,很多人都会遇到 这个问题.当你在 段后插入分页符 想开启新的一页的时候,新页首行有个空行.如果删除,会连同分页符一起删除.不删除有影响排版美观.那怎么解决呢: 解决办 ...

  6. Android中数据存储（四）——ContentProvider存储数据

    目录(?)[+]   当一个应用程序在Android中安装后,我们在使用应用的过程中会产生很多的数据,应用都有自己的数据,那么我们应该如何存储数据呢? 数据存储方式 Android 的数据存储有5种方 ...

  7. CentOS 6.9/7通过yum安装指定版本的PostgreSQL扩展PostGIS

    一.安装PostGIS扩展插件(24_10) // 安装EPEL源 # rpm -ivh http://dl.fedoraproject.org/pub/epel/6/x86_64/epel-rele ...

  8. Asp.Net Session的三种方法及Web.Config设置

    转载:http://user.gw-ec.com/login/safelog/redirectt?session=so%2f%2bSjyZURMOe54xgk%2bUhL2CgGqDjOKEbYwZS ...

  9. loading(正在加载特效)

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

  10. 要使用C#实现一个ActiveX控件

    要使用C#实现一个ActiveX控件,需要解决三个问题: 1.使.NET组件能够被COM调用 2.在客户机上注册后,ActiveX控件能通过IE的安全认证 3.未在客户机上注册时,安装包能通过IE的签 ...