您的位置：首页 > Web前端 > JavaScript

D3js-对柱状图的增，删，排序

2015-07-01 17:25 633 查看

<%@ 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">



</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

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航