Most charts aren’t complete without axes to provide context and labeling for the graphical elements being displayed. This lesson introduces D3’s APIs for creating, customizing, and displaying axes while building on topics from previous lessons.

var margin = { top: 10, right: 20, bottom: 60, left: 25 };
var width = 425 - margin.left - margin.right;
var height = 625 - margin.top - margin.bottom; var svg = d3.select('.chart')
.append('svg')
.attr('width', width + margin.left + margin.right)
.attr('height', height + margin.top + margin.bottom)
.append('g')
.attr('transform', `translate(${margin.left}, ${margin.top})`); svg.append('rect')
.attr('width', width)
.attr('height', height)
.style('fill', 'lightblue')
.style('stroke', 'green'); /**
* Create Y axis
*/
// Set scale
const yScale = d3.scaleLinear()
.domain([0, 100])
.range([height, 0]);
// add y-axis
const yAxis = d3.axisLeft(yScale);
// const yAxis = d3.axisLeft(yScale).ticks(10, '.1s');
// If you want to add fine control about the ticks:
// const yAxis = d3.axisLeft(yScale).tickValues([5,10,30,50,80,100]);
// add to the svg
svg.call(yAxis); /**
* Create X axis
*/
const xScale = d3.scaleTime()
.domain([new Date(2017, 6, 1), new Date(2017, 7, 1)])
.range([0, width]); //https://github.com/d3/d3-time
const xAxis = d3.axisBottom(xScale)
.ticks(d3.timeDay.every(4))
.tickSize(10)
.tickPadding(15); svg.append('g')
.attr('transform', `translate(0, ${height})`)
.call(xAxis);

[D3] Create Chart Axes with D3 v4的更多相关文章

  1. [D3] Create DOM Elements with D3 v4

    Change is good, but creating from scratch is even better. This lesson shows you how to create DOM el ...

  2. [D3] 10. Creating Axes with D3

    <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...

  3. [D3] Animate Chart Axis Transitions in D3 v4

    When the data being rendered by a chart changes, sometimes it necessitates a change to the scales an ...

  4. d3 - bar chart

    用 D3.js 做一个简单的柱形图. 做柱形图有很多种方法,比如用 HTML 的 div 标签,或用 svg . 推荐用 SVG 来做各种图形.SVG 意为可缩放矢量图形(Scalable Vecto ...

  5. [D3] 12. Basic Transitions with D3

    <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...

  6. [D3] Create Labels from Non-numeric Data with Ordinal Scales in D3 v4

    When your data contains discrete, non-numeric property values that you need to format or convert bef ...

  7. [D3] Create Labels from Numeric Data with Quantize Scales in D3 v4

    Sometimes data needs to be converted from a continuous range, like test scores, to a discrete set of ...

  8. [D3] Select DOM Elements with D3 v4

    Before you can create dazzling data driven documents, you need to know how D3 accesses the DOM. This ...

  9. [D3] Modify DOM Elements with D3 v4

    Once you can get hold of DOM elements you’re ready to start changing them. Whether it’s changing col ...

随机推荐

  1. 关于getinstalledpackages參数的分析。

    此blog不写API的使用方法仅仅分析此參数的知识点. 今天学习安卓突然学习到了getinstalledpackages()的方法获取到安装应用信息 ,他接收一个int flags的值.然后在网上查询 ...

  2. Java编程思想(四) —— 复用类

    看了老罗罗升阳的专訪,不由自主地佩服,非常年轻,我之前以为和罗永浩一个级别的年龄.也是见过的不是初高中编程的一位大牛之中的一个,专訪之后.发现老罗也是一步一个脚印的人. 别说什么难做,做不了.你根本就 ...

  3. Spark Tachyon的命令行使用

    Tachyon命令行使用 Tachyon接口说明 接口操作示例 copyFromLocal copyToLocal ls和lsr count cat mkdir.rm.rmr和touch pin和un ...

  4. javafx style and cssFile

    public class EffectTest extends Application { public static void main(String[] args) { launch(args); ...

  5. VMwarep挂载镜像及配置本地Yum源

    1.挂载镜像: *. 通过mount命令         linux mount挂载设备(u盘,光盘,iso等 )使用说明 *.  通过VMware的控制页面手工挂载 1.1    打开Vmware软 ...

  6. 微信小程序从零开始开发步骤(一)搭建开发环境

    从零到有写一个小程序系列专题,很早以前就想写来分享,但由于项目一直在进展,没有过多的时间研究技术,现在可以继续分享了. 1:注册 用没有注册过微信公众平台的邮箱注册一个微信公众号, 申请帐号 ,网址: ...

  7. [置顶] Docker学习总结(2)——Docker实战之入门以及Dockerfile(二)

    csphere/php-fpm:5.4 # cd docker-training/php-fpm/ # ls Dockerfile nginx_nginx.conf supervisor_nginx. ...

  8. Log4j日志管理的简单实例

    大型项目中非常多情况下要分析程序的日志信息,怎样管理自己的日志信息至关重要. 在应用程序中加入日志记录总的来说基于三个目的 , 监视代码中变量的变化情况,周期性的记录到文件里供其它应用进行统计分析工作 ...

  9. C语言之文件操作06——写数据到文本文件遇0停止

    //文件 /* =============================================================== 题目:输入10个篮球运动员的身高数据(cm)保存至D盘文 ...

  10. php课程 12-42 php中类的关键字有哪些

    php课程 12-42 php中类的关键字有哪些 一.总结 一句话总结:const.final.static 1.类常量-const2.最终版本-final3.静态成员-static 1.php中类常 ...