同折线图的坐标轴的实现是相同的，先用d3.scale.linear()创建比例尺，再用d3.svg.axis()创建坐标轴并且设置对应的比例尺，最后添加SVG元素并“绑定”坐标轴到其上，就可以看到完成以后的坐标轴。注意这里需要对移动SVG元素，使它们在视觉上组装成一个坐标系（但实际上它们在位置上是零散的，并没有很强的关系）。
散点的实现
在图表中一般点都是通过画圆来实现的，当圆的半径足够小的时候，它就是点。
// 添加散点 main.selectAll('.point') .data(dataset) .enter() .append('circle') .attr('class', 'point') .attr('cx', function(d) { return xScale(d[0]); }) .attr('cy', function(d) { return yScale(d[1]); }) .attr('r', 5);
与折线图添加点的方式是一样的。在main元素中选择到所有的圆先“占位”（因为此时选择到的是一个空的集合，只是这个集合代表main中所有的圆），然后绑定dataset到此集合上，通过enter()和append()搭配使用添加新的circle元素直到集合元素个数与dataset子元素个数相同为止。用比例尺计算出各圆的坐标并对其相关属性进行赋值，就完成了点的添加。因为散点图的点有点多，为了图表更加美观，给圆设置一下样式。
.point { fill: #2ec7c9; fill-opacity: 0.5; }
最后，散点图长这样。
气泡图
坐标轴的实现
因为只有模拟的数据结构不同，实现原理都是类似的，这里就不再赘述，直接上代码。
// 模拟数据 var dataset = [ { x: 69, y: 45, weight: 5 },{ x: 30, y: 37, weight: 10 }, { x: 43, y: 10, weight: 23 },{ x: 54, y: 48, weight: 41 }, { x: 18, y: 18, weight: 41 },{ x: 88, y: 21, weight: 32 }, { x: 45, y: 48, weight: 12 },{ x: 14, y: 32, weight: 9 }, { x: 78, y: 18, weight: 16 },{ x: 13, y: 45, weight: 32 } ]; // 添加x轴和y轴 var xScale = d3.scale.linear() .domain([0, 100]) .range([0, width - padding.left - padding.right]); var yScale = d3.scale.linear() .domain([0, 50]) .range([height - padding.top - padding.bottom, 0]); var xAxis = d3.svg.axis() .scale(xScale) .orient('bottom'); var yAxis = d3.svg.axis() .scale(yScale) .orient('left');
气泡的实现
// 添加气泡 main.selectAll('.bubble') .data(dataset) .enter() .append('circle') .attr('class', 'bubble') .attr('cx', function(d) { return xScale(d.x); }) .attr('cy', function(d) { return yScale(d.y); }) .attr('r', function(d) { return d.weight; });
最后的气泡图是长这样的。
总结