<%@ 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. 24.最优布线问题(kruskal算法）

    时间限制: 1 s 空间限制: 128000 KB 题目等级 : 白银 Silver 题解 查看运行结果 题目描述 Description 学校需要将n台计算机连接起来,不同的2台计算机之间的连接费用 ...

  2. MySQL -- 性能优化的最佳20+条经验

    FROM:http://www.cnblogs.com/shlhm/p/3235848.html ,学习学习~ 今天,数据库的操作越来越成为整个应用的性能瓶颈了,这点对于Web应用尤其明显.关于数据库 ...

  3. centos的linux内核源码下载方法

    http://vault.centos.org/ http://blog.csdn.net/xiongzhizhu/article/details/51816243

  4. glob函数的使用

    glob库函数用于Linux文件系统中路径名称的模式匹配,即查找文件系统中指定模式的路径.注意,这不是正则表达式匹配,虽然有些相似,但还是有点差别. glob函数原型       #include & ...

  5. ArcGIS For Android ExportTileCache应用

    说明:从ArcGIS For Android10.2.4 ,開始支持下载在线地图服务切片缓存到移动设备本地.以便离线时进行地图浏览.本文章摘要介绍,使用自己公布的服务时,须要注意的内容. 一.首先公布 ...

  6. web小流量实验方案

    近期在思考怎么做小流量,在网上搜了一下,总结例如以下: 1.前提,站点pv已经达到了一定的规模,比方上百万pv,不做小流量冒然更新功能,可能会带来大面积流量损失.在这样的前提下须要做小流量实验 2.什 ...

  7. Android RecyclerView （一） 使用完全解析

    转载请标明出处: http://blog.csdn.net/lmj623565791/article/details/45059587: 本文出自:[张鸿洋的博客] 概述 RecyclerView出现 ...

  8. html端编码规范

    理想的方式是让HTML只用于定义内容呈现的结构,让CSS控制内容呈现的样式,而所有功能的实现定义在JavaScript中

  9. Storm和Spark Streaming框架对比（转）

    原文链接:Storm和Spark Streaming框架对比 Storm和Spark Streaming两个都是分布式流处理的开源框架.但是这两者之间的区别还是很大的,正如你将要在下文看到的. 处理模 ...

  10. C语言不定参数

    最近,遇到一个c语言的不定参数问题.其实,对于c语言的不定参数问题,只需要三个函数就可以搞定了.这三个函数的头文件是<stdarg.h>,其实下面的三个函数都是一个宏定义(macro).  ...