d3.js学习笔记--Mike Bostock: Thinking with Joins
我们可以使用 append 方法, 来创建一个单一元素: var svg = d3.select('svg'), d = {"x": 50, "y": 50}; svg.append("circle") .attr("cx", d.x) .attr("cy", d.y) .attr("r", 25); 如果想传递多条数据, 则需要这样编写: var svg = d3.select('svg'), data = [{"x": 50, "y": 50}, {"x": 120, "y": 50}]; svg.selectAll("circle") .data(data) .enter() .append("circle") .attr("cx", function(d) { return d.x; }) .attr("cy", function(d) { return d.y; }) .attr("r", 25); 这里代码主要的疑惑点在于: svg.selectAll("circle") 为什么我们要选择要新创建的DOM元素呢? 以下是处理方式. 我们不必告诉D3如何实现, 而是告诉D3我们所想要的. 我想要一个circle绑定到一个data上, 即每个circle和data数组中的元素一一对应. 这种概念叫做: data join 数据 join to 存在的DOM元素,