d3设置坐标轴样式，，将线性图标的下段代码中的line改为area var area_generator = d3.svg.area() .x(function(d, i) { return scale_x(i); }) //x坐标点的值为data数组的下标，参数d暗示传进来的数据，i暗示下标 .y0(g_height) //y0暗示y轴 .y1(function(d) { return scale_y(d) }) //y1暗示实际曲线上的值 .interpolate("cardinal") //让线条变得光滑，不是折线而是光滑的曲线 // 当页面有多个不异元素，select只能选择切合条件的第一个元素，想要选择此中某一个指定的元素，可以把阿谁元素赋给一个变量，然后使用变量名去实现 // 如下所示，g暗示上面赋值的阿谁变量g,而不是标签<g></g> g.append("path").attr("d", area_generator(data)) 可以看到这个时候的图表样子如下所示：

设置填充样式 g.append("path").attr("d", area_generator(data)) //通过d属性值，添加line_generator函数 .style("fill", "steelblue") //设置填充样式

到这儿面积图表根基就画好了。?

d3.js ----面积图表