【D3.V3.js数据可视化系列课程】（十七）-通过键联结数据-JavaSript-爱易网页

【D3.V3.js数据可视化系列课程】（十七）-通过键联结数据

日期：2014-05-16　浏览次数：20388 次

【D3.V3.js数据可视化系列教程】（十七）--通过键联结数据

最后效果：点击删除会从左侧消失。数值和条是对应的，即添加一条时更新位置后对应条上的数值还在这条上。

(1)键值对数据集

var dataset = [ {key:0,value:5},{key:1,value:10},{key:2,value:13},{key:3,value:19},{key:4,value:21},{key:5,value:25},{key:6,value:22},{key:7,value:18},{key:8,value:15},{key:9,value:13},{key:10,value:11},{key:11,value:12},{key:12,value:15},{key:13,value:20},{key:14,value:18},{key:15,value:17},{key:16,value:16},{key:17,value:18},{key:18,value:23},{key:19,value:25}];

(2)更新数据引用，包含下面所有关于要使用到d.value的地方

.domain([0,d3.max(dataset,function(d){

return d.value;

})])

.range([0,h]);

(3)定义键函数(简洁)，以备数据绑定到元素的时候使用

var key=function(d){

return d.key;

};

(4)从左侧退出

bars.exit().transition().duration(500)

.attr("x",

-xScale.rangeBand())//w-xScale.rangeBand()间隙宽其实其他负数也行

.remove();});

<!DOCTYPE html>
<html>
  	<head>
		<meta charset="utf-8">
		<title>testD3-18-update.html</title>
		<script type="text/javascript" src="http://localhost:8080/spring/js/d3.v3.js"></script>
	</head>
	<body>
	<button>单击更新</button>
	<br>
	<p>单击添加</p>
	<br>
	<a>单击删除</a>
	<br>
		<script type="text/javascript">
//(1)键值对数据集
var dataset = [ 
{key:0,value:5},
{key:1,value:10},
{key:2,value:13},
{key:3,value:19},
{key:4,value:21},
{key:5,value:25},
{key:6,value:22},
{key:7,value:18},
{key:8,value:15},
{key:9,value:13},
{key:10,value:11},
{key:11,value:12},
{key:12,value:15},
{key:13,value:20},
{key:14,value:18},
{key:15,value:17},
{key:16,value:16},
{key:17,value:18},
{key:18,value:23},
{key:19,value:25}];
			
//设置SVG的高宽
var w=600;
var h=250; 
var barPadding = 1;
//定义序数比例尺
var xScale=d3.scale.ordinal()//序数比例尺
			 .domain(d3.range(dataset.length))  
		     .rangeRoundBands([0,w],0.05); 
//(2)更新数据引用，包含下面所有关于要使用到d.value的地方		     
var yScale=d3.scale.linear()//y仍然是线性比例尺
.domain([0,d3.max(dataset,function(d){
	return d.value;
})])
.range([0,h]);	
//(3)定义键函数(简洁)，以备数据绑定到元素的时候使用
//把所有.data(dataset)改成.data(dataset,key)
var key=function(d){
	return d.value;
};	     
//Create SVG element
var svg = d3.select("body")//选中DOM中的目标元素
		.append("svg")//为目标元素附加上一个svg子元素
		.attr("width", w)//设置这个svg的宽
		.attr("height", h);//设置这个svg的高
//为SVG添加条形
svg.selectAll("rect")//选中空元素，表示即将创建这样的元素
	.data(dataset,key)//对此后的方法都执行dataset.length遍
	.enter()//数据元素值比前面选中的DOM元素多就创建一个新的DOM元素
	.append("rect")//取得enter的占位元素，并把rect追加到对应的DOM中
	.attr("x", function(d, i) {//设置横坐标，从0开始每次右移元素宽那么长(w / dataset.length)
			//return i * (w / dataset.length);
			return xScale(i);//这里使用序数比例尺，自己去找刚才划分好的档位
	})
	.attr("y", function(d) {//设置纵坐标，纵坐标正方向是从上往下的，所以条有多长就要设置起点是相对于h再向上移动条长
			return h - yScale(d.value);
	})
	//.attr("width", w / dataset.length - barPadding)//设置元素宽，留出间隙宽barPadding。
	.attr("width", xScale.rangeBand())//这里xScale比例尺已经设置间距了所以直接用
	.attr("height", function(d) {
			return yScale(d.value);
	})
	.attr("fill", function(d) {//设置RGB颜色与数值的关系
			return "rgb(0, 0, " + (d.value * 10) + ")";
	});
//为条加上数值
svg.selectAll("text")
			   .data(dataset,key)
			   .enter()
			   .append("text")
			   .text(function(d) {
			   		return d.value;
			   })
			   .attr("text-anchor", "middle")
			   .attr("x", function(d, i) {
			   		return xScale(i)+xScale.rangeBand()/2;
			   })
			   .attr("y", function(d) {
			   		return h - yScale(d.value) + 14;
			   })
			   .attr("font-family", "sans-serif")
			   .attr("font-size",function(d)

免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。