java使用d3_[Java教程]一个初学者的指南，使用D3做数据绑定

[Java教程]一个初学者的指南，使用D3做数据绑定

0 2016-07-03 13:00:09

一个初学者的指南，使用D3做数据绑定

D3.js 是个强大的数据可视化库，可以做出惊艳的图表。比如：气泡图，线图和条形图－－只需要很少行的代码

随着初学者对JavaScript的理解，可以将数组或者对象转换成一个五彩缤纷的显示效果。然而，每一个初学者的比较纠结的是一开始理解如何将数据绑定在实际的DOM元素上。这就是我们所知道的“数据绑定”或者叫“数据连接”。这是一个重要的处理，因为这个整个过程的第一步！

非常直观的，你可能希望使用一个 for() 循环，循环每一项数据并且创建一个元素，像这样：var data = [{x: 100,y: 100},{x: 200,y: 200},{x: 300,y: 300}] for(var i = 0; i< data.length;i++){ svg.append("circle") .attr("cx",function(data){ return data[i].x;}) .attr("cy",function(data){ return data[i].y;}) .attr("r",2.5); }

但是，这并没有说如何让它工作，事实上，这里没有for()循环，下面的这个代码块将覆盖上面的功能：var data = [{x: 100,y: 100},{x: 200,y: 200},{x: 300,y: 300}] svg.selectAll("circle") .data(data) .enter().append("circle") .