If you want ot add margins, should append graphics container in svg

    var svg = d3.select('#chartArea').append('svg')

            .attr('width', w + margin.left + margin.right)

            .attr('height', h + margin.top + margin.bottom)

            .append('g') //The last step is to add a G element which is a graphics container in SBG.

            .attr('transform', 'translate(' + margin.left + ', ' + margin.top + ')'); //Then offset that graphic element by our left and top margins.

Define the margin:

    var dataset = _.map(_.range(30), function(num) {

        return Math.random() * 50;

    }), //reandom generate 15 data from 1 to 50

            margin = {top: 10, bottom: 10, left: 10, right: 10},

            w = 400 - margin.left - margin.right,

            h = 300 -margin.top - margin.bottom;
<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title></title>

    <script src="../bower_components/underscore/underscore-min.js"></script>

    <script src="../ventor/d3.min.js"></script>

    <style type="text/css">

        body

        {

            padding-top: 50px;

            padding-left: 100px;

        }

        #chartArea {

            width: 400px;

            height: 300px;

            background-color: #CCC;

        }

        .bar

        {

            display: inline-block;

            width: 20px;

            height: 75px; /* Gets overriden by D3-assigned height below */

            margin-right: 2px;

           /* fill: teal; *//* SVG doesn't have background prop, use fill instead*/

            z-index:99;

        }

    </style>

</head>

<body>

<section id="chartArea"></section>

<script>

    var dataset = _.map(_.range(30), function(num) {

        return Math.random() * 50;

    }), //reandom generate 15 data from 1 to 50

            margin = {top: 10, bottom: 10, left: 10, right: 10},

            w = 400 - margin.left - margin.right,

            h = 300 -margin.top - margin.bottom;

    var svg = d3.select('#chartArea').append('svg')

            .attr('width', w + margin.left + margin.right)

            .attr('height', h + margin.top + margin.bottom)

            .append('g') //The last step is to add a G element which is a graphics container in SBG.

            .attr('transform', 'translate(' + margin.left + ', ' + margin.top + ')'); //Then offset that graphic element by our left and top margins.

    var yScale = d3.scale.linear()

            .domain([0, d3.max(dataset) * 1.1]) //d3.max(dataset), set the max val of database

            .range([0, h]);

    var xScale = d3.scale.ordinal()

            .domain(dataset)

            .rangeBands([0,w],0.3, 0.1);

//    var colorScale = d3.scale.category20c();

    var colorScale = d3.scale.quantile()

            .domain([d3.max(dataset) / 4, d3.max(dataset) / 2 , 3*d3.max(dataset) / 4, d3.max(dataset)])

            .range(["#9c9ede","#6b6ecf","#5254a3", "#393b79"]);

    svg.selectAll('div')

            .data(dataset)

            .enter()

            .append('rect')// svg doesn't have div, use rect instead

            .attr('class', "bar")

            .attr('width', xScale.rangeBand())

            .attr('x', function(each_data, index){

                return xScale(each_data);

            })

            .attr('y', function(each_data){

                return h-yScale(each_data);

            })

            .attr('height', function(each_data, i){

                return yScale(each_data);

            })

            .attr('fill', colorScale);

</script>

</body>

</html>

[D3] 8. Margins的更多相关文章

  1. [D3] 13. Cleaner D3 code with selection.call()

    selection.call() method in D3 can aid in code organization and flexibility by eliminating the need t ...

  2. [D3] 12. Basic Transitions with D3

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

  3. [D3] 11. Basic D3 chart interactivity on(), select(this), classed(class, trueorfalse)

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

  4. [D3] 10. Creating Axes with D3

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

  5. [D3] 9. Scatter Plot

    Up until now we've just looked at bar charts. A handy chart, no doubt, but D3 offers a variety of ch ...

  6. D3 JS study notes

    如何使用d3来解析自定义格式的数据源? var psv = d3.dsvFormat("|"); // This parser can parse pipe-delimited t ...

  7. 使用D3.js构建实时图形

    首先你需要在计算机上安装Node和npm. 数据的可视化表示是传递复杂信息的最有效手段之一,D3.js提供了创建这些数据可视化的强大工具和灵活性. D3.js是一个JavaScript库,用于使用SV ...

  8. D3.js学习（七）

    上一节中我们学会了如何旋转x轴标签以及自定义标签内容,在这一节中,我们将接触动画(transition) 首先,我们要在页面上添加一个按钮,当我们点击这个按钮时,调用我们的动画.所以,我们还需要在原来 ...

  9. D3.js学习（六）

    上节我们学习了如何绘制多条曲线, 以及给不同的曲线指定不同的坐标系.在这节当中,我们会对坐标轴标签相关的处理进行学习.首先,我们来想一个问题, 如何我们的x轴上的各个标签的距离比较近,但是标签名又比较 ...

随机推荐

  1. Ajax、Comet、HTML 5 Web Sockets技术比较分析

    最近因为考虑研究B/S结构网站即时消息处理 参考了 JAVA怎么样实现即时消息提醒http://bbs.csdn.net/topics/330015611http://www.ibm.com/deve ...

  2. Maven安装与更新

    Maven是Apache组织中的一个颇为成功的开源项目,主要服务于基于Java平 台的项目构建.依赖管理和项目信息管理: 1) Maven是跨平台的,在Windows.Linux和Mac上都可以使用: ...

  3. 纯js将form表单的数据封装成json 以便于ajax发送

    使用方式: var json = form2Json("formId");//这里的参数是form表单的id值 form2json.js function form2Json(fo ...

  4. Fibonacci数列对任何数取模都是一个周期数列

    题目是要求出斐波那契数列n项对一个正整数取模,那么可以把斐波那契数列取模后得到的数列周期求出来. 比如下面一个题目:求出f[n]的后4位,先求出数列对10000取模的周期,然后再查找即可. #incl ...

  5. win7+ubuntu双系统安装攻略

    一1.下载分区软件,为ubuntu安装分出一个区 2.磁盘管理器,选中该区,右键,删除卷,该区变为绿色,成为空闲区 3.成功 二为ubunt添加开机导引项 1,安装好easybcd2.0后,启动软件: ...

  6. ANDROID_MARS学习笔记_S03_003_LocationManager、LocationListener

    一.简介 二.代码1.xml (1)AndroidManifest.xml 增加 <uses-permission android:name="android.permission.A ...

  7. c标准库和运行时库

    c运行时库与c标准库的区别 c标准库包括常用的数学函数.字符串操作函数等等,这些函数都是由编程高手写的,效率高,很少出错,而且是完全符合c语言标准的函数. c运行库可以说是c标准库的扩展集,它是完全包 ...

  8. Beta Round ＃9 (酱油杯noi考后欢乐赛)随机数生成器

    题目:http://www.contesthunter.org/contest/Beta%20Round%20%EF%BC%839%20%28%E9%85%B1%E6%B2%B9%E6%9D%AFno ...

  9. 【canvas】伸缩 / 剪裁 / 文本 / 阴影 / 填充图案 / 填充渐变

    <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8& ...

  10. windows下 破解 Sublime Text3 和汉化

    这货已经出到3了. windows下载,破解,使用方法: 一:破解 1: 去官网下载最新版本 http://www.sublimetext.com/3 2:下载破解器(SublimeTextKeyge ...