[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 ...
随机推荐
- Swift之 vm10虚拟机安装Mac OS X10.10教程
VM10装Mac OS X 10.9.3及更新到Mac OS X 10.10,让你的windows也能玩Swift . 近期WWDC放出终极大招--新的编程语言Swift(雨燕),导致一大波程序猿 ...
- idle-实现清屏
最近在学习python的时候,需要用到ubuntu的python idle.这个工具可以测试python语法.但是呢,在使用的过程中遇到了一个问题.就是随着你的输入,你会发现这个输入会停留在这个界面的 ...
- js插件---markdown如何使用
js插件---markdown如何使用 一.总结 一句话总结:看文档,看api,看参数列表,看js调用插件的调用函数的参数(json) 1.js和css的问题:如何知道插件要引入哪些js和css? a ...
- js关于循环的理解
学习任何语言都离不开循环,js也是一样,看了网上的资料,整理一份关于js循环的理解. 1.最基础循环,js和其他高级语言一样使用for.while循环 (function() { for(var i= ...
- 84.friend友元类
#include <iostream> using namespace std; //友元函数的主要作用就是访问私有变量 class myclass { public: friend cl ...
- PHP表单生成器,快速生成现代化的form表单,快速上手
form-builder PHP表单生成器,快速生成现代化的form表单.包含复选框.单选框.输入框.下拉选择框等元素以及省市区三级联动.时间选择.日期选择.颜色选择.树型.文件/图片上传等功能. 详 ...
- BZOJ1835: [ZJOI2010]base 基站选址(线段树优化Dp)
Description 有N个村庄坐落在一条直线上,第i(i>1)个村庄距离第1个村庄的距离为Di.需要在这些村庄中建立不超过K个通讯基站,在第i个村庄建立基站的费用为Ci.如果在距离第i个村庄 ...
- Activemq去除认证
0.背景介绍 由于项目安全性的约束,不能在配置文件中暴露一些密码信息. 默认情况下,ActiveMQ在进行接发消息的时候会用户认证.通过ActiveMQ-client初始化ActiveMQConn ...
- Windows学习总结(2)——30+ Windows命令提示符快捷键汇总
即便你平时经常用到 Windows 命令提示符,可能也会对本文将提到的快捷键数量感到惊讶.其实我们可以使用快捷键来简化命令提示符中的选择操作,或对文本进行重复操作,下面我们会列出完整列表. 大家都知道 ...
- 关于bat的变量赋值和解析机制
以下的演示涉及几个知识点: 1. 怎样把命令输出内容保存到变量中? 2. 多次改变变量值,为什么在for或是if的()中的无效,怎样变通? 3. bat的function实现? 见代码,和代码凝视 : ...