为了账号安全,请及时绑定邮箱和手机立即绑定

使用D3制作图表

LuckyYang 其它
难度中级
时长 1小时52分
学习人数
综合评分9.47
36人评价 查看评价
9.9 内容实用
9.3 简洁易懂
9.2 逻辑清晰
  • // svg

    const SVG_WIDTH = 500

    const SVG_HEIGHT = 250

    const SVG_MARGIN = { left: 50, top: 30, right: 20, bottom: 20 }

    const G_WIDTH = SVG_WIDTH - SVG_MARGIN.left - SVG_MARGIN.right

    const G_HEIGHT = SVG_HEIGHT - SVG_MARGIN.top - SVG_MARGIN.bottom


    // d3.select('#container').append('svg:svg')

    const svg = d3

     .select('#container')

     .append('svg')

     //width height

     .attr('width', SVG_WIDTH) // attribute

     .attr('height', SVG_HEIGHT)


    const g = d3

     .select('svg')

     .append('g')

     .attr('transform', `translate(${SVG_MARGIN.left}, ${SVG_MARGIN.top})`)


    const data = [1, 3, 5, 7, 8, 4, 3, 7]


    const scaleX = d3

     .scaleLinear()

     .domain([0, data.length]) // 输入的范围

     .range([0, G_WIDTH]) // 输出的范围


    const scaleY = d3

     .scaleLinear()

     .domain([0, d3.max(data)]) // 输入的范围

     .range([G_HEIGHT, 0]) // 输出的范围


    // const lineGenerartor = d3.svg

    const lineGenerartor = d3

     .line()

     // .x((d, i) => i) // 0,1,2,3,4

     .x((d, i) => scaleX(i)) // 0,1,2,3,4

     .y((d) => scaleY(d)) // 1, 3, 5, 7, 8, 4, 3, 7

     // .interpolate('cardinal') // 线的拟合方式

     .curve(d3.curveCatmullRom.alpha(0.5)) // 线的拟合方式


    g.append('path').attr('d', lineGenerartor(data)) //d=M1,0L20,$0L40,50L!00,200L0,200   d : is a short for path data


    const xAxis = d3.axisBottom(scaleX)

    const yAxis = d3.axisLeft(scaleY)


    g.append('g').call(xAxis).attr('transform', `translate(0, ${G_HEIGHT})`)


    g.append('g').call(yAxis)




    查看全部
    0 采集 收起 来源:坐标系绘制

    2020-08-01

  • // svg

    const SVG_WIDTH = 500

    const SVG_HEIGHT = 250

    const SVG_MARGIN = { left: 50, top: 30, right: 20, bottom: 20 }

    const G_WIDTH = SVG_WIDTH - SVG_MARGIN.left - SVG_MARGIN.right

    const G_HEIGHT = SVG_HEIGHT - SVG_MARGIN.top - SVG_MARGIN.bottom


    // d3.select('#container').append('svg:svg')

    const svg = d3

     .select('#container')

     .append('svg')

     //width height

     .attr('width', SVG_WIDTH) // attribute

     .attr('height', SVG_HEIGHT)


    const g = d3

     .select('svg')

     .append('g')

     .attr('transform', `translate(${SVG_MARGIN.left}, ${SVG_MARGIN.top})`)


    const data = [1, 3, 5, 7, 8, 4, 3, 7]


    const scaleX = d3

     .scaleLinear()

     .domain([0, data.length]) // 输入的范围

     .range([0, G_WIDTH]) // 输出的范围


    const scaleY = d3

     .scaleLinear()

     .domain([0, d3.max(data)]) // 输入的范围

     .range([G_HEIGHT, 0]) // 输出的范围


    // const lineGenerartor = d3.svg

    const lineGenerartor = d3

     .line()

     // .x((d, i) => i) // 0,1,2,3,4

     .x((d, i) => scaleX(i)) // 0,1,2,3,4

     .y((d) => scaleY(d)) // 1, 3, 5, 7, 8, 4, 3, 7

     // .interpolate('cardinal') // 线的拟合方式

     .curve(d3.curveCatmullRom.alpha(0.5)) // 线的拟合方式


    g.append('path').attr('d', lineGenerartor(data)) //d=M1,0L20,$0L40,50L!00,200L0,200   d : is a short for path data


    const xAxis = d3.axisBottom(scaleX)

    const yAxis = d3.axisLeft(scaleY)


    g.append('g').call(xAxis).attr('transform', `translate(0, ${G_HEIGHT})`)


    g.append('g').call(yAxis)




    查看全部
    0 采集 收起 来源:坐标系绘制

    2020-08-01

  • 简单可视化
    查看全部
    0 采集 收起 来源:饼状图(下)

    2019-12-27

  • enter
    查看全部
    0 采集 收起 来源:水平柱状图表

    2019-08-01

  • https://blog.csdn.net/ysj1218/article/details/80523474,链式调用有点类似于jQuery

    查看全部
    0 采集 收起 来源:画布制作

    2019-05-18

  • https://img1.sycdn.imooc.com//5becd4de000161ac13150740.jpg

    查看浏览器的支持列表

        支持svg的浏览器,对d3的支持还是比较好的

    查看全部
    0 采集 收起 来源:课程简介

    2018-11-15

  • d3代码在github上https://img1.sycdn.imooc.com//5becd4880001947713130738.jpg

    查看全部
    0 采集 收起 来源:课程简介

    2018-11-15

  • select&selectAll  选择html上的dom元素

    append  添加我们想要的一些元素

    读取和使用数据  使用一些函数来读取和使用数据,也可以使用dsv、csv一些数据格式

    https://img1.sycdn.imooc.com//5becd3460001776f13120739.jpg

    查看全部
    0 采集 收起 来源:课程简介

    2018-11-15

  • https://img1.sycdn.imooc.com//5becd30800019ac513120739.jpg可以做什么

    查看全部
    0 采集 收起 来源:课程简介

    2018-11-15

  • g元素 相当于html中的div,可以理解为group
    查看全部
    0 采集 收起 来源:画布制作

    2018-10-07

  • d3.select(selector) 选择符合条件的第一个元素 d3.selectAll(selector)选择符合条件的所有元素
    查看全部
  • v4用新的曲线API来说明如何根据数据为line和area插值。line.interpolate和area.interpolate方法由line.curve和area.curve代替。 1, curveCatmullRom 2, curveCatmullRomClosed 3, curveCatmullRomOpen this._d3.line().curve(this._d3.curveCatmullRom.alpha(.5));
    查看全部
    1 采集 收起 来源:坐标系绘制

    2017-12-26

  • V4 nterpolate("cardinal") -> curve(d3.curveCardinal); d3.svg.line() -> d3.line() d3.scale.linear() -> d3.scaleLinear()
    查看全部
    2 采集 收起 来源:绘制曲线

    2018-03-22

  • bost.ocks.org/mike/circles/
    查看全部
首页上一页1234567下一页尾页

举报

0/150
提交
取消
课程须知
有html,css和javascript基础的同学学习这门课程会比较容易一些。没有基础的同学,也可以通过课程里面的例子加深自己对相关知识的理解。
老师告诉你能学到什么?
如何使用select和selectAll选择DOM元素、如何使用append添加DOM元素、如何使用line,area等方法生成图表曲线、如何使用数据文件让我们的图表可以随着数据变化而动态更新。

微信扫码,参与3人拼团

意见反馈 帮助中心 APP下载
官方微信
友情提示:

您好,此课程属于迁移课程,您已购买该课程,无需重复购买,感谢您对慕课网的支持!