d3.js java_D3.js入门

柱状图

var data = [10, 15, 30, 50, 80, 65, 55, 30, 20, 10, 8];

//定义数据，定义集合A

function render(data) { //render函数来更新图表

// Enter

d3.select("body").selectAll("div.h-bar")

//选中body,选中类名为h-bar的div，其实此时页面上没有这些元素，选择出图形元素的集合

.data(data) // data函数将数组绑定到将要创建的图形元素上

.enter() // enter函数选择没有被可视化的数据元素，render第一次调用的时候，没有数据被可视化，所以选中的是所有的数据

.append("div") // 为每一个数据创建一个div，这里d3为响应的div添加了__data__属性，这个属性的值为绑定的数据值；

.attr("class", "h-bar")//类名设置为h-bar

.append("span"); //每个div中添加一个span

// Update

d3.select("body").selectAll("div.h-bar")

.data(data) //定义图形集合和数据集合,更新模式下，data()函数返回数据集合和图形集合的交集

.style("width", function (d) { // 在和数据关联的图形更改属性，所有的d3修饰函数都可以使用这样的函数来修改图形元素的属性，这个函数有一个形参，d代表与对应图形元素关联的数据值

return (d * 3) + "px";

})

.select("span") // 子元素能拿到父级元素的值

.text(function (d) {

return d;

});

// Exit

d3.select("body").selectAll("div.h-bar")

.data(data)

.exit() //得到没有任何数据关联的图形元素

.remove();//移除这些元素

}

setInterval(function () {

data.shift();

data.push(Math.round(Math.random() * 100));

render(data);

}, 1500);

render(data);

参考文献：《D3.js数据可视化实战手册》