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. UIButton文字居左显示

    题外话:时间依然过的非常快.不知不觉2015年就过去一半了.感觉自己好像没有大的改变.仅仅能感叹时间飞逝,却不能有所收获. 我从来都不是一个安于现状的人,改变自己的想法从未停止过.我想大多数人都跟我有 ...

  2. js防止提交数据之后的按钮连击

    js防止提交数据之后的按钮连击 一.实例描述 当页面提交的数据特别多时,页面会反应比较迟钝,此时如果用户等不及而连续单击按钮,导致数据重复提交.本案例就是为了防止数据重复提交. 二.截图 三.代码 & ...

  3. Python 面向对象 —— super 的使用(Python 2.x vs Python 3.x)

    注意区分当前的 Python 版本是 2.X 还是 3.X,Python 3.X 在 super 的使用上较之 Python 2.X 有较大的变化: 1. Python 2.x class Conta ...

  4. Elasticsearch之需要注意的问题(es和jdk版本)

    (1)在使用java代码操作es集群的时候 要保证本地使用的es的版本和集群上es的版本保持一致.  (2)保证集群中每个节点的JDK版本和es基本配置一致 这个很简单,不多说.  (3)es集群中j ...

  5. 2017国家集训队作业[agc008f]Black Radius

    2017国家集训队作业[agc008f]Black Radius 时隔4个月,经历了省赛打酱油和中考各种被吊打后,我终于回想起了我博客园的密码= = 题意: ​ 给你一棵树,树上有若干个关键点.选中某 ...

  6. usermod---修改用户账户信息

    usermod可用来修改用户帐号的各项设定. 语法 usermod [-LU][-c <备注>][-d <登入目录>][-e <有效期限>][-f <缓冲天数 ...

  7. CMDB学习之二数据采集

    首先也要调用插件的方式,来写采集数据插件,在src目录下创建一个插件 plugins ,然后在plugins下创建disk.py ,memory.py, network.py等等 src plugin ...

  8. Highcharts柱形范围图使用示例

    功能需求:统计三种不同的状态在一天的时间段里面所占的范围 第一步:引入highcharts.js和highcharts-more.js文件 引入文件文件源码:下载https://img.hcharts ...

  9. c# winform 技术提升

    http://www.cnblogs.com/junjie94wan/category/303961.html http://www.cnblogs.com/springyangwc/archive/ ...

  10. Elasticsearch中JAVA API的使用

    1.Elasticsearch中Java API的简介 Elasticsearch 的Java API 提供了非常便捷的方法来索引和查询数据等. 通过添加jar包,不需要编写HTTP层的代码就可以开始 ...