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）。
新聞熱點
疑難解答
