d3学习之（Data Visualization with d3.js Cookbook ）（第三章）-2
第三章 处理数据
2.绑定对象作为数据
当遇到一个更复杂的可视化时，你遇到的数据集可能不是一个原始的数据类型值或字符串，而是一个javascript对象，在这一部分我们将讨论用D3如何来实现这种复杂数据类型的可视化。
打开你的编辑器输入下面代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Object as Data</title>
<link rel="stylesheet" type="text/css" href="styles.css"/>
<script type="text/javascript" src="http://d3js.org/d3.v3.min.js"></script>
</head>
<body>
<script type="text/javascript">
var data = [ // <- A
{width: 10, color: 23},{width: 15, color: 33},
{width: 30, color: 40},{width: 50, color: 60},
{width: 80, color: 22},{width: 65, color: 10},
{width: 55, color: 5},{width: 30, color: 30},
{width: 20, color: 60},{width: 10, color: 90},
{width: 8, color: 10}
];
var colorScale = d3.scale.linear()
.domain([0, 100])
.range(["#add8e6", "blue"]); // <- B
function render(data) {
d3.select("body").selectAll("div.h-bar")
.data(data)
.enter().append("div")
.attr("class", "h-bar")
.append("span");
d3.select("body").selectAll("div.h-bar")
.data(data)
.exit().remove();
d3.select("body").selectAll("div.h-bar")
.data(data)
.attr("class", "h-bar")
.style("width", function (d) { // <- C
return (d.width * 5) + "px"; // <- D
})
.style("background-color", function(d){
return colorScale(d.color); // <- E
})
.select("span")
.text(function (d) {
return d.width; // <- F
});
}
function randomValue() {
return Math.round(Math.random() * 100);
}
setInterval(function () {
data.shift();
data.push({width: randomValue(), color: randomValue()});
render(data);
}, 1500);
render(data);
</script>
</body>
</html>
js数据对象很可能是你会经常遇到的数据类型当你在加载web数据的时候，在这个例子中我们将看到对象数据如果实现丰富的可视化效果。
先看下面的代码
var data = [ // <- A
{width: 10, color: 23},{width: 15, color: 33},
{width: 30, color: 40},{width: 50, color: 60},
{width: 80, color: 22},{width: 65, color: 10},
{width: 55, color: 5},{width: 30, color: 30},
{width: 20, color: 60},{width: 10, color: 90},
{width: 8, color: 10}
];
本例中的数据集也是一个数组，但是数组里面的元素都是json格式，也就是js对象类型的数据。本例子显示的效果如下图所示：
它如何工作的呢？
在本例中我们用对象的数组取代了上一节中的数据类型，在每一个对象中有两个属性width和color，这两个属性的值都是整数型。这个例子的结构和上一节的结构类似，这里就不多重复，如果看不懂可以回去看第一节的例子。
在B处我们看到了一个复杂的定义
var colorScale = d3.scale.linear()
.domain([0, 100])
.range(["#add8e6", "blue"]); // <- B
scales，即范围，包括颜色的范围，这些概念将在以后的章节阐述，这里我们只要明白这里的函数就是允许让我们输入1-100直接的整数，然后产生一定范围内的颜色。
本例和上一节中的例子的最大不同就在于数据是如何被处理的：
function (d) { // <- C
return (d.width * 5) + "px"; // <- D
在本例中我们可以看到数据是以对象的形式和可视化元素相应联系在一起的，通过浏览器的审查元素我们也可以看到在上一节中我们讲到的d3插入的用于在数据和可视化元素之间建立联系的_data_属性的值实际上是一个object。
因此我们可以通过d.width获取 这个对象的width属性的值，在D处。同样的在E处，我们也可以通过d.color获取对象的颜色属性值。子对象span同样继承了父对象所绑定的数据，因此这种F处他也可以通过d.width的值来动态设置其属性。
这一节我们展示了对象类型的数据如何被可视化，通过使用上一节中的框架，这是D3非常强大的功能，它允许你使用同样的方法和框架处理不同的数据类型，简单的或者复杂的，后面我们将看到更多这样的例子。