D3js-对柱状图的增，删，排序
<%@ 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-对柱状图的增，删，排序的更多相关文章
- python基础中的四大天王-增-删-改-查
列表-list-[] 输入内存储存容器 发生改变通常直接变化,让我们看看下面列子 增---默认在最后添加 #append()--括号中可以是数字,可以是字符串,可以是元祖,可以是集合,可以是字典 #l ...
- C# ADO.NET (sql语句连接方式)(增,删,改)
using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.We ...
- 好用的SQL TVP~~独家赠送[增-删-改-查]的例子
以前总是追求新东西,发现基础才是最重要的,今年主要的目标是精通SQL查询和SQL性能优化. 本系列主要是针对T-SQL的总结. [T-SQL基础]01.单表查询-几道sql查询题 [T-SQL基础] ...
- iOS FMDB的使用(增,删,改,查,sqlite存取图片)
iOS FMDB的使用(增,删,改,查,sqlite存取图片) 在上一篇博客我对sqlite的基本使用进行了详细介绍... 但是在实际开发中原生使用的频率是很少的... 这篇博客我将会较全面的介绍FM ...
- iOS sqlite3 的基本使用(增 删 改 查)
iOS sqlite3 的基本使用(增 删 改 查) 这篇博客不会讲述太多sql语言,目的重在实现sqlite3的一些基本操作. 例:增 删 改 查 如果想了解更多的sql语言可以利用强大的互联网. ...
- ADO.NET 增 删 改 查
ADO.NET:(数据访问技术)就是将C#和MSSQL连接起来的一个纽带 可以通过ADO.NET将内存中的临时数据写入到数据库中 也可以将数据库中的数据提取到内存中供程序调用 ADO.NET所有数据访 ...
- MVC EF 增 删 改 查
using System;using System.Collections.Generic;using System.Linq;using System.Web;//using System.Data ...
- 第18课-数据库开发及ado.net 连接数据库.增.删.改向表中插入数据并且返回自动编号.SQLDataReade读取数据
第18课-数据库开发及ado.net 连接数据库.增.删.改向表中插入数据并且返回自动编号.SQLDataReade读取数据 ADO.NET 为什么要学习? 我们要搭建一个平台(Web/Winform ...
- django ajax增 删 改 查
具于django ajax实现增 删 改 查功能 代码示例: 代码: urls.py from django.conf.urls import url from django.contrib impo ...
- StringBuilder修改字符串内容，增,删,改,插
package seday01;/** * 字符串不变对象特性只针对字符串重用,并没有考虑修改操作的性能.因此String不适合频繁修改内容. * 若有频繁修改操作,使用StringBuilder来完 ...
随机推荐
- mysql性能测试
mysqlslap mysql自带的工具使用非常方面: 使用语法如下: # mysqlslap [options] 常用参数 [options] 详细说明: --auto-generate-sql, ...
- ACM -- 算法小结（十）素数的两种打表法
素数的两种打表法 下面介绍两种素数打表法,由于是两年前留下的笔记,所以没有原创链接~~ @_@!! 第一种疯狂打表法: #include<stdio.h> #include<math ...
- Educational Codeforces Round 10 D. Nested Segments 离线树状数组 离散化
D. Nested Segments 题目连接: http://www.codeforces.com/contest/652/problem/D Description You are given n ...
- 破解MyEclipse2015 stable3.0(亲测可用)
整个破解过程最好断网: 1.安装好MyEclipse2015 stable3后,打开设置好工作目录后,退出.2.将plugins文件夹中的文件拷贝到myeclipse安装目录的plugins文件夹下, ...
- ASM相关视图
oracle asm对于我们并非一个黑盒子 ,我们能够通过对应视图查看asm instance信息,和oracle系统视图一样. v$asm_diskgroup x$kfgrp 记录diskgrou ...
- SQL Server 2000 ——DBCC命令
http://blog.163.com/ruifeng_00/blog/static/6904584200971291923462/ 一.定义 微软当初从SYBASE将DBCC是作为数据库一致性检 ...
- NHibernate 3 Beginner's Guide
前言 这一章是一个完整的NHibernate的Simple,原文中用Fluent NHibernate做映射,但我使用NHibernate3.2版本,所以3.2的Conformist代替Fluent ...
- MyEclipse for Linux版下载
最近看到很多网友都在找MyEclipse for Linux版下载,费了很大劲也没有找到.1.建议通过代理到官方网站下载. 2.用迅雷下载.设置迅雷使用代理下载(我用的就是这种方式). MyEclip ...
- RxJava 和 RxAndroid （生命周期控制和内存优化）
RxJava使我们很方便的使用链式编程,代码看起来既简洁又优雅.但是RxJava使用起来也是有副作用的,使用越来越多的订阅,内存开销也会变得很大,稍不留神就会出现内存溢出的情况,这篇文章就是介绍Rxj ...
- 9.线程通信wait、notify
线程之间通信 1.线程是操作系统的独立的个体,但这些个体如果不经过特殊处理就不能成为一个整体. 2.使用wait.notify,方法实现线程通信(2个方法都是需要object方法) 3.wait(释放 ...