D3经典的select-data-enter-append-attr/style的编程套路
：选择元素-绑定数据-添加新元素的占位符-添加元素-设置属性或样式。
例如创建一个圆：
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>D3 - test</title> <script src="http://d3js.org/d3.v3.min.js"></script></head><body> <script> //SVG的尺寸 var w = 400; var h = 50; //数据 var dataset = [5, 10, 15, 20, 25]; var svg = d3.select("body") .append("svg") .attr("width", w) .attr("height", h); //创建圆 var circles = svg.selectAll("circle") .data(dataset) /** * 给新增数据添加占位符，表示将要添加一个元素 * 返回输入（enter）选择：当前选择中存在但是当前DOM元素中还不存在的每个数据元素的占位符节点。此方法只在由data运算符返回的更新选择中定义。 */ .enter() .append("circle"); //根据dataset设置每个圆的圆心和半径 circles.attr("cx", function(d, i) { return (i * 60) + 35; }) .attr("cy", h/2) .attr("r", function(d) { return d; }); </script></body></html>PS：enter方法从data操作符返回一个虚拟选集。
这个方法只能作用于data操作符，因为只有data操作符返回的是三个虚拟选集（enter, update, exit）。
新闻热点
疑难解答
