You can’t add axes to a chart if you don’t make room for them. To that end, the D3 community has adopted a simple convention for defining margin sizes that shields most of your code from having to know or care about them. This lesson demonstrates the margin convention and the simple flexibility it adds to your D3 projects.

var margin = { top: 10, right: 20, bottom: 25, 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 / 2)
.attr('height', height)
.style('fill', 'lightblue')
.style('stroke', 'green'); svg.append('rect')
.attr('x', width / 2)
.attr('width', width / 2)
.attr('height', height)
.style('fill', 'lightblue')
.style('stroke', 'green');

[D3] Margin Convention with D3 v4的更多相关文章

  1. D3.js 入门学习(二) V4的改动

    //d3.scan /* 新的d3.scan方法对数组进行线性扫描,并根据指定的比较函数返回至少一个元素的索引. 这个方法有点类似于d3.min和d3.max. 而d3.scan可以得到极值的索引而不 ...

  2. [D3] Drawing path in D3

    Here we have a force layout with three nodes. In the example, we will link three nodes with line and ...

  3. D3学习之:D3.js中的12中地图投影方式

    特别感谢:1.[张天旭]的D3API汉化说明.已被引用到官方站点: 2.[馒头华华]提供的ourd3js.com上提供的学习系列教程,让我们这些新人起码有了一个方向. 不得不说,学习国外的新技术真的是 ...

  4. [D3] Reuse Transitions in D3 v4

    D3 transitions start executing as soon as they’re created, and they’re destroyed once they end. This ...

  5. [D3] Animate Transitions in D3 v4

    D3 makes it easy to add meaningful animations to your data visualizations. Whether it’s fading in ne ...

  6. [D3] Basic Interactivity with D3 v4

    Data visualizations are a lot more interesting when they’re interactive. Whether it’s clicks, roll o ...

  7. D3.JS V4 绘制中国地图

    参考:http://bl.ocks.org/almccon/fe445f1d6b177fd0946800a48aa59c71 http://blog.csdn.net/lzhlzz/article/d ...

  8. [D3] Build an Area Chart with D3 v4

    Similar to line charts, area charts are great for displaying temporal data. Whether you’re displayin ...

  9. [D3] Build a Line Chart with D3 v4

    Line charts are often used to plot temporal data, like a stock price over time. In this lesson we’ll ...

随机推荐

  1. sql-server 2005数据库文件恢复(检測到基于一致性的逻辑 I/O 错误)

    今天sql-server数据库突然报错: SQL Server 检測到基于一致性的逻辑 I/O 错误 校验和不对(应为: 0x7c781313,但实际为: 0x67a313c9). 在文件 'C:\P ...

  2. ios in-house 公布整个过程(startssl认证)

    首先大体说一下步骤: 1.申请苹果enterprise 账号 为应用生成app id,provision profile等 详见:http://www.th7.cn/Program/IOS/20131 ...

  3. modSecurity规则学习(一)——配置文件

    环境:modSecurity3.0,nignx1.13.8 modSecurity配置文件 1.nginx.conf server { listen ; modsecurity on; //启动mod ...

  4. vim 帮助文档汉化

    我们在使用vim 的时候,经常会碰到一些陌生的命令,这时候我们可以通过 :help *** 来查询一些命令的使用方法.不过呢,我们安装的vim默认的都是英文的,看起来很费劲,尤其是向我这样英语比较差的 ...

  5. .net运行项目的几种形式

    1.通过配置IIS 2.通过VS运行项目 3.发布到测试服务器 不同于PHP的发布,直接把相关的类文件传入ftp即可. .net的发布是编译好dll文件,将dll文件传入即可. 比如改了某个文件,就把 ...

  6. zoj 1119 / poj 1523 SPF (典型例题 求割点 Tarjan 算法)

    poj : http://poj.org/problem?id=1523 如果无向图中一个点 u 为割点 则u 或者是具有两个及以上子女的深度优先生成树的根,或者虽然不是一个根,但是它有一个子女 w, ...

  7. IBM磁盘阵列及文件系统的管理

    一.几个基本概念 物理卷(PV):一个物理卷指一块硬盘 卷组(VG):卷组是可用物理硬盘的集合,可以逻辑地看成一块大硬盘 物理分区(PP):卷组中物理卷划分成固定大小的块(缺省为4MB) 逻辑卷(LV ...

  8. react-native React Native version mismatch

    android/app/build.gradle     file: dependencies { compile fileTree(dir: "libs", include: [ ...

  9. yum---rpm软件包管理器

    yum命令是在Fedora和RedHat以及SUSE中基于rpm的软件包管理器,它可以使系统管理人员交互和自动化地更细与管理RPM软件包,能够从指定的服务器自动下载RPM包并且安装,可以自动处理依赖性 ...

  10. Python Web框架要点

    1. Web应用程序处理流程 前端客户端(浏览器.APP.ajax.爬虫程序)>>>--http的请求与响应--<<<服务器程序(Gunicorn.uwsig)&l ...