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

使用D3制作图表

LuckyYang 其它
难度中级
时长 1小时52分
学习人数
综合评分9.47
36人评价 查看评价
9.9 内容实用
9.3 简洁易懂
9.2 逻辑清晰
  • //svg var svg = d3.select("#container") .append("svg") .attr("width",500) .attr("height",250) d3.select("svg") .append("g") .attr("transform","translate(50,30)")
    查看全部
    0 采集 收起 来源:画布制作

    2018-03-22

  • http://caniuse.com/#search=svg
    查看全部
    0 采集 收起 来源:课程简介

    2017-05-25

  • 为什么我起了服务还是报那个错,直接用127.0.0.1:8888/data.csv可以获取到
    查看全部
    0 采集 收起 来源:使用数据文件

    2017-03-27

  • //竖直柱状图标(另一种方式) var data = [1,4,7,2,9,6,5,16], bar_height = 50, bar_padding = 10, svg_height = 500, svg_width = (bar_height+bar_padding)*data.length; var scale = d3.scale.linear() .domain([0,d3.max(data)]) .range([0,svg_height]); var svg = d3.select('#container') .append('svg') .attr('width',svg_width) .attr('height',svg_height) //enter undate exit var bar = svg.selectAll('g') .data(data) .enter() .append('g') .attr('transform',function(d,i){return 'translate('+i*(bar_height+bar_padding)+','+(svg_height-scale(d))+')';}) bar.append('rect') .attr({ "width": bar_height, "height": function(d){return scale(d)} }) .style('fill','steelblue'); //形成了一个新的坐标系 bar.append('text') .text(function(d){return d;}) .attr({ 'x':bar_height/2, 'y':0, "dy":15, 'text-anchor':'end' })
    查看全部
    0 采集 收起 来源:竖直柱状图表

    2018-03-22

  • ordinal
    查看全部
  • ordinal
    查看全部

举报

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

微信扫码,参与3人拼团

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

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