d3.js ----面积图表

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)) 
    

可以看到这个时候的图表样子如下所示:

d3.js ----面积图表

设置填充样式

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

d3.js ----面积图表

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

上一篇:网络编程复习 D3章 多线程


下一篇:JavaScript编写油猴脚本(2)