<%@ 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. Java反射机制涉及的类常见方法使用总结

    import java.lang.reflect.Constructor; import java.lang.reflect.*; /*Class:代表一个字节码文件的对象,每当有类被加载进内存,JV ...

  2. bzoj1977 次小生成树

    Description 小 C 最近学了很多最小生成树的算法,Prim 算法.Kurskal 算法.消圈算法等等. 正当小 C 洋洋得意之时,小 P 又来泼小 C 冷水了.小 P 说,让小 C 求出一 ...

  3. PHP文件上传学习

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

  4. bzoj 2565: 最长双回文串 manacher算法

    2565: 最长双回文串 Time Limit: 20 Sec  Memory Limit: 256 MB 题目连接 http://www.lydsy.com/JudgeOnline/problem. ...

  5. 对 dpif_class 结构体的一点认识

         类 dpif_class 抽象的是OVS交换机用户空间和内核层datapath的通信接口(通过netlink),分层是出于性能和生产效率的考虑,通过接口dpif_class,用户层ovs-v ...

  6. SpringBoot添加支持CORS跨域访问

    原文:https://www.jianshu.com/p/c6ea21b64f6e CORS(Cross-Origin Resource Sharing)"跨域资源共享",是一个W ...

  7. python 实现Hadoop的partitioner和二次排序

    我们知道,一个典型的Map-Reduce过程包 括:Input->Map->Partition->Reduce->Output. Partition负责把Map任务输出的中间结 ...

  8. js 操作select和option常用代码整理

    1.获取选中select的value和text,html代码如下: <select id="mySelect"> <option value="1&qu ...

  9. Flink 靠什么征服饿了么工程师？

    Flink 靠什么征服饿了么工程师? 2018-08-13    易伟平 阿里妹导读:本文将为大家展示饿了么大数据平台在实时计算方面所做的工作,以及计算引擎的演变之路,你可以借此了解Storm.Spa ...

  10. 策略模式Strategy——回家乘什么车？

    1.问题与模式 时间:2014年6月       学校:廊坊师范        家:石家庄       人物:学生 又快到期末考试了,回家的节奏也奔上日程.无聊之余就想想这次回家的事儿.对我来说回家主 ...