D3简单使用整理

1. d3特点:可定制化程度高,但是复用性低,开发的流程相对固定。

2. 创建基本流程:

    a) 引入d3库;

    b) 加载数据;

    c) 创建比例尺;

    d) 创建svg;

    e) 注入数据绘制图表,设置过渡动画,绑定交互事件;

    f) 添加辅助信息。(数轴,提示标签,气泡)。

3. 静态图表的创建

    基本图形的创建:

        柱状图 条形图 饼图 折线图 面积图  

4. 动态图表的创建

动态图表:图表在某一时刻形状,颜色,位置等的变化,用户可以看到变化的过程

实现过程用到过渡

    (1) transition()

    (2) duration()

    (3) ease()  

        里面有四个参数:llinear   cirde   elastic   bounce

    (4) delay()

5. 比例尺:

    (1) 线性比例尺:d3.scale.linear()

常用方法:

    1) d3.scale.linear()   创建一个线性比例尺

          .domain([0,500]) 定义域

          .range([0,1000]) 值域

    2) linear(x)  输入定义域 返回 值域

    3) linear.invert(y) 输入值域,返回定义域

    4) linear.domain([numbers]) 设定或获取定义域

    5) linear.range([values])设定或获取值域

    6) linear.rangeRound([valuses]) 四舍五入,结果是整数

    7) linear.clamp([boolean])     false不收缩  true 收缩

    8) linear.nice([count])  扩展成理想状态

    9) linear.ticks([ticks]) 默认是10 用于选取坐标刻度

    10) linear.ticksFormat(count,[format]) 设置定义域内具有代表的值的表示形式,如小数

    (2) 序数比例尺:d3.scale.ordinal()

常用方法:

    1) d3.scale.orinal() 构建一个序数比例尺

    2) ordinal(x) 返回y  

    3) ordinal.domain([values]) 设定和获取x

    4) ordinal.range([values]) 设定或获取y

    5) ordinal.rangePoint(interval,[padding])  设置值域

    6) ordinal.rangeRoundPoints(interval,[padding]) 和ranggePoint()一样,但是会将结果取正

    7) ordinal.rangeRoundBands(interval,[padding],[outerpadding]) 代替 range()设定值域

    8) ordinal.rangeRoundRoundBands()  结果取整

    9) ordinal.rangeBand() 返回使用rangeBands() 设定后每一段的宽度

    10) ordinal.rangeExtend()  返回一个数组,值域的最大值和最小值

6. update enter exit(当选择集和数据的数量关系不确定的情况)

    (1) enter:数据比元素多,会用到enter()

    (2) update

    (3) exit

7. 图表交互:在图形元素上设置一个或者多个事件监听器

8. 饼图:

    1) 声明数据dataset,但是不能直接用于绘制图形,绘制饼图的一部分需要知道一段弧起始角度和终 止角度。通过d3.layout.pie() 声明布局,他的返回值为一个函数,然后将dataset作为参数传给它, 返回的数据即为转换后可以用的数据,是一个对象(起始角度,终止角度,原数据)。

    2) 生成器:

    path() 通过定义一段路径来绘制各种图形

        弧生成器:

            d3.svg.arc() 弧生成器

            .innerRadius() 设置内半径

            .outerRadius() 设置外半径

猜你喜欢

转载自blog.csdn.net/ysj1218/article/details/80523294
D3
今日推荐