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. 怎样借助log4j把日志写入数据库中

            log4j是一个优秀的开源日志记录项目.我们不仅能够对输出的日志的格式自定义,还能够自定义日志输出的目的地,比方:屏幕.文本文件,数据 库,甚至能通过socket输出.本节使用MySQ ...

  2. Lua 是一个小巧的脚本语言

    Redis进阶实践之七Redis和Lua初步整合使用 一.引言 Redis学了一段时间了,基本的东西都没问题了.从今天开始讲写一些redis和lua脚本的相关的东西,lua这个脚本是一个好东西,可以运 ...

  3. 51nod1004 n^n的末位数字

    题目来源: Author Ignatius.L (Hdu 1061) 基准时间限制:1 秒 空间限制:131072 KB 分值: 5 难度:1级算法题  收藏  关注 给出一个整数N,输出N^N(N的 ...

  4. 秀秀SolarWinds为网络工程师准备的工具

    SolarWinds Engineer's Toolset部分功能截图 650) this.width=650;" onclick='window.open("http://blo ...

  5. Eclipse怎样把文件系统形式的项目作为工程直接导入?

    导入的时候,选择已经存在的工程,如果选择文件系统,可能会提示没有项目可以导入.这个时候,可以从其它Eclipse项目下,copy一份.project文件过来,修改源文件中的工程名字.如果需要,也可以c ...

  6. 混合式框架-AngularJS

    简单介绍   AngularJS是为了克服HTML在构建应用上的不足而设计的.HTML是一门非常好的为静态文本展示设计的声明式语言,但要构建WEB应用的话它就显得乏力了.所以我做了一些工作(你也能够认 ...

  7. MDL--元数据锁的锁请求与锁等待+元数据锁类对象

    1 元数据锁的锁请求与锁等待     元数据锁在MySQL Server层,依照锁的状态被细分为两种.一种是已经施加的锁.一种是等待施加的锁即锁请求,这样被区分的原因,如MySQL对"cla ...

  8. gullo.me 的 natvps

    gullo.me 的 natvps 1. 在下面的地址中输入内网 IP,查看许可的网络资源 https://hosting.gullo.me/plugin/support_manager/knowle ...

  9. Office Open XML导出大数据

    Office Open XML导出大量数据到 Excel .NET使用Office Open XML导出大量数据到 Excel我相信很多人在做项目的都碰到过Excel数据导出的需求,我从最开始使用最原 ...

  10. Impala的安装(含使用CM安装 和 手动安装)(图文详解)

    Impala有两种安装方式: 1)使用CM安装Impala 2)手动安装Impala 注意:Impala不支持在Debian/Ubuntu, SuSE, RHEL/CentOS 6.5系统中安装. 基 ...