[D3] Margin Convention with D3 v4
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的更多相关文章
- D3.js 入门学习(二) V4的改动
//d3.scan /* 新的d3.scan方法对数组进行线性扫描,并根据指定的比较函数返回至少一个元素的索引. 这个方法有点类似于d3.min和d3.max. 而d3.scan可以得到极值的索引而不 ...
- [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 ...
- D3学习之:D3.js中的12中地图投影方式
特别感谢:1.[张天旭]的D3API汉化说明.已被引用到官方站点: 2.[馒头华华]提供的ourd3js.com上提供的学习系列教程,让我们这些新人起码有了一个方向. 不得不说,学习国外的新技术真的是 ...
- [D3] Reuse Transitions in D3 v4
D3 transitions start executing as soon as they’re created, and they’re destroyed once they end. This ...
- [D3] Animate Transitions in D3 v4
D3 makes it easy to add meaningful animations to your data visualizations. Whether it’s fading in ne ...
- [D3] Basic Interactivity with D3 v4
Data visualizations are a lot more interesting when they’re interactive. Whether it’s clicks, roll o ...
- D3.JS V4 绘制中国地图
参考:http://bl.ocks.org/almccon/fe445f1d6b177fd0946800a48aa59c71 http://blog.csdn.net/lzhlzz/article/d ...
- [D3] Build an Area Chart with D3 v4
Similar to line charts, area charts are great for displaying temporal data. Whether you’re displayin ...
- [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 ...
随机推荐
- 再谈怎样以最简单的方法将泛型为String类型的集合或String类型的数组转化为逗号间隔字符串形式
今天review代码,看见某些大爷在将泛型为String类型的集合或String类型的数组转化为逗号间隔字符串形式时仍然仅仅顾结果不注重过程,"大爷"咱能负点责任吗? 将泛型为St ...
- html5页面怎么播放音频和视频
html5页面怎么播放音频和视频 一.总结 一句话总结:html5 音频和视频标签:(audio And video),局限是不同浏览器对音频视频的格式支持很让人头痛 1.最基础的音频和视频标签的使用 ...
- 缓存函数memorize
function mulity(x){ return x*x; } function memorize(f){ var cache = {}; var key = arguments.length + ...
- 使用Java语言开发微信公众平台(五)——被关注回复与关键词回复
在上一篇文章中,我们实现了文本消息的接收与响应.可以在用户发送任何内容的时候,回复一段固定的文字.本章节中,我们将对上一章节的代码进行适当的完善,同时实现[被关注回复与关键词回复]功能. 一.微信 ...
- DG性能
网络带宽 根据primary database redo产生的速率,计算传输redo需要的带宽. 出去tcp/ip网络其余30%的开销,计算需要的带宽公式: 需求带宽=((每秒产生redo的速率峰值/ ...
- ACTIVATE STANDBY
ACTIVATE STANDBY 在有些场景下我们需要激活standby为primary,使用激活的standby完成一些的需求. 如: - 拿激活后的standby做应用测试. - primary宕 ...
- AMD规范(RequireJS)、CMD规范(SeaJS)、CommonJS(BravoJS)规范的辨析
首先,AMD,CMD,CommonJS都实现了文件模块化. 对于依赖的模块:AMD是提前执行:CMD是延迟执行: AMD是依赖前置,CMD是依赖就近: AMD官方解释:https://github.c ...
- Linux下关机命令的区别 (halt,poweroff,reboot,shutdown,init)
1.shutdown shutdown命令安全地将系统关机. 而在系统关机前使用shutdown命令﹐系统管理员会通知所有登录的用户系统将要关闭.并且login指令会被冻结﹐即新的用户不能再登录 ...
- 今日SGU 5.4
SGU 127 题意:给你n个数字,和m,k,问你有多少个数字的m次幂可以被k整除 收获:快速幂 #include<bits/stdc++.h> #define de(x) cout< ...
- tomcat日志配置之一自带log
问题 tomcat每次启动时,自动在logs目录下生产以下日志文件,且每天都会生成对应日期的一个文件,造成日志文件众多: localhost.2012-07-05.txt catalina.2012- ...