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. 自己定义控件-DownSlidingDrawer

    一.描写叙述 能够下拉的 SlidingDrawer 二.效果图 图片是网上找到,可是效果是一样的 三.源代码 https://github.com/mentor811/Demo_MySlidingD ...

  2. 关于命令行签名时.SF和.RSA文件的命名问题

    准备工作: 签名文件名称为android.keystore 签名的别名为123456789.keystore 1.使用签名命令后例如以下图 发现.SF和.RSA文件自己主动命名为12345678.SF ...

  3. es65 跨模块常量

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  4. FileStream vs/differences StreamWriter?

    https://stackoverflow.com/questions/4963667/filestream-vs-differences-streamwriter What is different ...

  5. lastb---显示用户错误的登录列表

    lastb命令用于显示用户错误的登录列表,此指令可以发现系统的登录异常.单独执行lastb命令,它会读取位于/var/log目录下,名称为btmp的文件,并把该文件内容记录的登入失败的用户名单,全部显 ...

  6. 【Codeforces Round #427 (Div. 2) C】Star sky

    [Link]:http://codeforces.com/contest/835/problem/C [Description] 给你n个星星的坐标(xi,yi); 第i个星星在第t秒,闪烁值变为(s ...

  7. eclipse - 下载网址

    这里面有着非常齐全的eclipse相关资源,而且都是放在网盘里面的,下载也方便 http://www.androiddevtools.cn/

  8. ONVIF客户端搜索设备获取rtsp地址开发笔记(精华篇)

    原文  http://blog.csdn.net/gubenpeiyuan/article/details/25618177   概要: 目前ONVIF协议家族设备已占据数字监控行业半壁江山以上,亲, ...

  9. Linux桌面新彩虹-Fedora 14 炫酷应用新体验

    Linux桌面新彩虹 --Fedora 14 炫酷应用新体验 650) this.width=650;" hspace="12" align="left&quo ...

  10. 一个统一将数据转换为JSON的方法

    这是我得方法: 导包: import net.sf.json.JSONArray; import net.sf.json.JSONObject; public void writeJson(Objec ...