d3.js ----面积图表

Null 发布于2019-08-21 17:56 / 3168人阅读

摘要：设置坐标轴样式，将线性图标的下段代码中的改为坐标点的值为数组的下标，参数表示传进来的数据，表示下标表示轴表示实际曲线上的值让线条变得光滑，不是折线而是光滑的曲线当页面有多个相同元素，只能选择符合条件的第一个元素，想要选择其中某一个指定的元素

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.append("path").attr("d", area_generator(data))

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

设置填充样式

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

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

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/90229.html

d3.js 使用坐标轴

摘要：本片记录坐标轴入门，使用版本如何实现坐标轴生成的坐标图是通过的路径元素元素组成的，如下图表示的是底部坐标轴不包括内部刻度，如下这部分通过描绘，在中称为容器则包括了和作为即线，即文字实现坐标轴主要步骤步骤主要如下创建比例尺创建坐标轴，是个函数本片blog记录d3坐标轴入门，使用版本v5.9.2 SVG如何实现坐标轴 d3生成的坐标图是通过svg的path(路径)元素 + g + lin...

Karuru 2019-08-23 16:43 评论0 收藏0
d3.js入门——selection与创建条形图

摘要：入门，根据官网部分教程学习，发现因为版本更新，有些和概念可能不适用，但总体思想未变。入门d3.js，根据官网部分教程学习，发现因为版本更新，有些api和概念可能不适用，但总体思想未变。本文思路跟随此篇blogLet’s Make a Bar Chart学习，加上自己的理解，并且查阅了部分更新资料元素选择 d3通过d3.select()或者d3.selectAll()获取元素，这两个...

yanbingyun1990 2019-08-23 16:18 评论0 收藏0
d3.js 创建完整柱形图

摘要：之前只是各个部分的，现在将各部分整合起来，发现还是学到了不少东西主要是加深了对比例尺的理解代码样式及数据样式接着是数据及柱状图宽高等留白用创建比例尺实践之后对比例尺与坐标轴的理解加深了一点轴使用线性比例尺，注意输入域轴使用比例尺用于柱形 d3js.org v5.9.2 之前只是各个部分的demo，现在将各部分整合起来，发现还是学到了不少东西主要是加深了对scale（比例尺）的理解...

snowLu 2019-08-23 16:44 评论0 收藏0
交互式数据可视化－D3.js（二）选择集和数据

摘要：相关的函数有两个和的工作过程的方法很简单，使用的也比较少。的工作过程能将数据各项分别绑定到选择的元素集上。当数组长度与元素数量不一致时，同样能够处理。多出的元素在最后。选择集 select和selectAll类似jquery： d3.select(body) d3.select(.body) d3.select(#body) d3.selectAll(...

leanote 2019-08-02 11:54 评论0 收藏0
交互式数据可视化－D3.js（二）选择集和数据

摘要：相关的函数有两个和的工作过程的方法很简单，使用的也比较少。的工作过程能将数据各项分别绑定到选择的元素集上。当数组长度与元素数量不一致时，同样能够处理。多出的元素在最后。选择集 select和selectAll类似jquery： d3.select(body) d3.select(.body) d3.select(#body) d3.selectAll(...

褰辩话 2019-08-23 12:42 评论0 收藏0