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. vim 基础学习之普通模式

    .操作 = 操作符 + 动作 aaa bbb例如,d是删除命令,b是移动到距离光标最近的字符串开头当我们执行db的时候,就会删除光标(不包括光标位置)到最近字串开头之间的字符dj则会删除光标所在行以及 ...

  2. Razor数组数据

    控制器层 public ActionResult DemoArray() { Product[] array = { new Product {Name = "Kayak", Pr ...

  3. 55.npm install 报错 :stack Error: Can't find Python executable "python"

    转自:https://www.cnblogs.com/zengry/p/8044379.html 解决方法 : 1. 安装python , 设置环境变量 :cmd --> path='%path ...

  4. FFT之大数乘法

    #include <iostream> #include <stdio.h> #include <cmath> #include <algorithm> ...

  5. 给iOS项目中添加图片,并通过UIImageView引用和显示该UIImage图片

    [问题] 关于iOS/iPhone中的文件选择对话框,用于用户去选择图片等文件 过程中,问题转换为,需要给当前iOS项目中,添加一个图片. 类似于Windows开发中的资源文件,其中图片文件属于资源的 ...

  6. iframe自适应高度解决方法 .

    <div id="leftBar"> <iframe name="tag" src="_iframe.html" styl ...

  7. 【Codeforces Round #427 (Div. 2) A】Key races

    [Link]:http://codeforces.com/contest/835/problem/A [Description] [Solution] 傻逼题. [NumberOf WA] [Revi ...

  8. ZOJ 3524 Crazy Shopping

    Crazy Shopping Time Limit: 3000ms Memory Limit: 65536KB This problem will be judged on ZJU. Original ...

  9. C# MQTT 服务端客户端通讯

    关于MQTT 在这里我就不做过多的介绍了 , 超时空连接点我 MQTT示例 注: 该示例演示统一使用WPF, 简单MVVM模式演示, 复制代码需注意引用 NuGet包  GalaSoft MQTT服务 ...

  10. 关于Django的登录系统

    首先需要明确的是登录的本质:登录就是服务器确认当前用户的身份,并将数据库中的记录提取匹配 默认的登录系统是用户名密码方式,这种方式很平常,也没什么特别的.这里主要说的是第三方验证登录 通常第三方验证登 ...