d3.js ----面积图表

Posted 2020-11-24 homehtml

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") //设置填充样式

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