美文网首页
2018-12-02-学习周报

2018-12-02-学习周报

作者: EWL | 来源:发表于2018-12-02 20:36 被阅读0次

内容要点

  • d3图表的一些更为复杂的操作,希望此次的学习内容可以在之后的分享里面为大家提供一些绘图和可视化操作上的思路,并且希望得到大家的指正和建议

内容详情

  1. 三种类型的图表绘制


    image.png
image.png image.png

三个图表对应的代码链接如下:
图1
图2
图3

  1. 相关的api记录(上一次学习总结中的api不再仔细介绍)
  • d3.extent(array[, accessor])
    用于求解范围,分别有两个参数,为数组array与读取数据的函数accessor,如果没有设置accessor,则直接从array中找到最大值最小值,作为输出范围,如果有accessor,则根据accessor函数自定义访问array中的数据。例如:
let x = d3.scaleTime()
  .domain(d3.extent(data, d => new Date(d.date)))
  .range([margin.left, width - margin.right]);

定义域domain函数中,d3.extent(data, d => new Date(d.date))表示我们需要从data数组中的读取每一个数组元素的date属性值,找出所有date中的最大值最小值作为最后输出的范围。

  • d3.max(array[, accessor])
    顾名思义,找到数组中的最大值,accessor同样是数据访问自定义方式。

  • pow.nice()
    将输入范围扩展到漂亮的整数,如图一展示的纵坐标的范围就是通过nice调整到合适的范围,这个函数可以说是非常人性化了,不需要我们手动的计算合适的计数范围。

  • ticks
    从比例尺的 domain 中返回具有代表性的日期刻度。但是此处还有一些细节的东西,需要详细描述,参考

  • tickSizeOuter
    外侧刻度大小


    image.png

    在顶部的三个图中,外侧刻度均设置为0。

  • clone
    复制元素。
    图2可以看到在纵坐标处有一个我的步数的纵坐标图例。此处的图例text元素就是通过复制最顶部的纵坐标刻度14000得到的,重新设置xy位置,并填入新的文本,即可制作纵轴指示图例。此处参考了d3画廊observable上大师们的做法。大师的作品

  • defined
    缺省访问器,使用方式如下图。在编写折线生成器的时候,过滤掉份非数字的坐标,可以有效的防止图线断裂或绘制失败的情况发生。

let line = d3.line()
  .defined(d => !isNaN(d.value)) // 防止出现非数字值导致的图线断裂
  .x(d => x(new Date(d.date)))
  .y(d => y(d.value));
  • call(熟悉的call/apply/bind)
  • tickFormat
  • d3.timeFormat
    (坐标的自定义显示格式,此处用在了横坐标时间的格式化上,可以看到顶部三个图的横轴时间格式是不同的)
// 图2
let xAxis = g => g
  .attr("transform", `translate(0,${height - margin.bottom})`)
  .call(d3.axisBottom(x)
    .ticks(width / 80)
    .tickSizeOuter(0)
    .tickFormat(d3.timeFormat('%Y-%m-%d'))
  )
  .call(g => g.selectAll('.tick text')
    .attr('y', 10)
    .attr('x', 30)
    .attr('transform', 'rotate(25)')
  );
// 图3
let xAxis = g => g
  .attr("transform", `translate(0,${height - margin.bottom})`)
  .call(d3.axisBottom(x)
    .ticks(width / 80)
    .tickSizeOuter(0)
    .tickFormat(d3.timeFormat('%Y年%m月%d日'))
  )
  .call(g => g.selectAll('.tick text')
    .attr('y', 10)
    .attr('x', 30)
    .attr('transform', 'rotate(25)')
  );

相关文章

  • 2018-12-02-学习周报

    内容要点 d3图表的一些更为复杂的操作,希望此次的学习内容可以在之后的分享里面为大家提供一些绘图和可视化操作上的思...

  • 2022-01-22日更

    团队管理方式需要进行逐步优化,首先从写周报开始,要求大家每人都要写周报,根据得到上学习的, 周报公式=复盘目标+原...

  • 一起成长系列(52)

    五月过去了,学习进行中。 L洋老婆生小孩,他休陪护假了,自然也就没有学习工作周报。 审阅L斌学习工作周报,提出如下...

  • [Luffy][第三十一周-2019]

    ▓▓▓▓▓▓▓▓▓░░░░░░ 59%——By @YearPogress 行业学习 暂停+10。每每到写周报的时候...

  • 【处世】我只想要一杯凉开水的友情

    记得在高中的时候,我们语文老师“硬性”要求我们订购语文周报。至此,在忙碌的学习生活中能抽出时间看看语文周报上...

  • 学习分析周报告带来的变化

    福州市中山小学 黄小海 上一周是学生收到完整学习分析周报告(后简称:学习周报)后的第一周,对于学生和对于教师的我来...

  • 往期周报

    7月29日周报 7月22日周报 6月17日週報 6月10日周报 6月3日周报 5月28日周报 5月20日周报 5月...

  • 2018-12-05

    主後2018-12-02-主日崇拜·· 青橄榄树一生持守 【出29:19】“你要将那一只公绵羊牵来,亚伦和他儿子要...

  • Kotlin Weekly 中文周报 —— 19

    Kotlin 开发中文周报 文章 通过犯错不断学习 Kotlin(engineering.udacity.com)...

  • 《三步写作法,周报从此写得快》学习心得

    今天,学习了“得到”写作体验营的课程视频《三步写作法,周报从此写得快》,课程主要介绍了一套周报公式(模版)。即 1...

网友评论

      本文标题:2018-12-02-学习周报

      本文链接:https://www.haomeiwen.com/subject/zlqscqtx.html