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. hdu 5312 Sequence(数学推导——三角形数)

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=5312 Sequence Time Limit: 2000/2000 MS (Java/Others)  ...

  2. 关于HashMap

    总是觉得对HashMap很熟悉,但最近连续被问到几个关于它的问题,才发现它其实并不简单.这里对关于它的一些问题做个总结,也希望能够大家一个参考. 都知道它是基于hash值,可以进行常量时间消化的存储结 ...

  3. 41.Node.js使用cnpm

    转自:http://www.runoob.com/nodejs/nodejs-tutorial.html npm是Node.js中维护第三方库.模块的工具,但是国外的速度很悲剧,这里有一个中国的源cn ...

  4. POJ 3051 DFS

    题意:判断连通块大小 水题 //By SiriusRen #include <cstdio> #include <cstring> #include <algorithm ...

  5. OpenCV —— 视频播放控制

    创建滚动条,实现滚动条随视频播放移动. #include "cv.h" #include "highgui.h" CvCapture* capture=NULL ...

  6. 微信小程序从零开始开发步骤(四)自定义分享的功能

    上一章节,实现了小程序的底部导航的功能,这一节开始实现一些简单的功能.本章节介绍的是小程序的自定义分享的功能. 可以分享小程序的任何一个页面给好友或群聊.注意是分享给好友或群聊,并没有分享到朋友圈.一 ...

  7. 【Codeforces Round #457 (Div. 2) C】Jamie and Interesting Graph

    [链接] 我是链接,点我呀:) [题意] 在这里输入题意 [题解] 找比n-1大的最小的素数x 1-2,2-3..(n-2)-(n-1)长度都为1 然后(n-1)-n长度为(x-(n-2)) 然后其他 ...

  8. 【Uva 1543】Telescope

    [Link]: [Description] 给你一个圆和圆周上的n(3≤n≤40)个不同点.请选择其中的m(3≤m≤n)个,按照在圆 周上的顺序连成一个m边形,使得它的面积最大. [Solution] ...

  9. 【2017 Multi-University Training Contest - Team 3】Kanade's sum

    [Link]:http://acm.hdu.edu.cn/showproblem.php?pid=6058 [Description] 给你n个数; 它们是由(1..n)组成的排列; 然后给你一个数字 ...

  10. struts2中action手动获取參数

    struts2中action手动获取Session,jsp页面參数 1. ActionContext 在Struts2开发中,除了将请求參数自己主动设置到Action的字段中,我们往往也须要在Acti ...