当前位置: 首页 > Web前端 > HTML

d3.js----areachart

时间:2023-04-02 20:32:57 HTML

d3设置坐标轴样式,将线性图标下方代码中的线改为面积图vararea_generator=d3.svg.area().x(function(d,i){returnscale_x(i);})//x坐标点的值是data数组的下标,参数d代表传入的数据,i代表下标。y0(g_height)//y0代表y轴。y1(function(d){returnscale_y(d)})//y1表示实际曲线上的值。interpolate("cardinal")//使线平滑,不是折线而是平滑曲线//当page有多个相同的元素,select只能选中第一个满足条件的元素。如果要选择指定的元素之一,可以将该元素赋值给一个变量,然后使用变量名来实现//如下图,g代表上面赋值的变量g,不是标签g.append("path").attr("d",area_generator(data))可以看到此时的图表是这样的:设置填充样式g。append("path").attr("d",area_generator(data))//通过d属性添加line_generator函数value.style("fill","steelblue")//这里设置填充样式面积图基本上就完成了。?