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. 关于Java（介绍）

    基于Java官方指导文档,开展学习 Java是什么 Java 是编程语言,也是一个平台 特性 简单 可移植 面向对象 分布式运算高性能 健壮 安全 动态 体系结构中立 记忆宫殿:恋爱是件简单的事,但放 ...

  2. Ubuntu/Linux下7款轻量级编辑器 (转)

    From http://www.feiyan.info/39.html 在Windows卧铺使用Zend Studio或者EditPlus写PHP,Zend Studio适合大项目,EditPlus配 ...

  3. GITLAB的版本回退（非命令行）

    今天遇到小韩的问题,大约解决如下:

  4. USB 2.0 A型、B型、Mini和Micro接口定义及封装

    USB全称Universal Serial Bus(通用串行总线),目前USB 2.0接口分为四种类型A型.B型.Mini型还有后来补充的Micro型接口,每种接口都分插头和插座两个部分,Micro还 ...

  5. 忽然想到，为什么以前iOS的工资高

    听说做iOS的在上海工资也可以  前几年还行,现在也不太行了除非你水平很高 现在移动应用已经100多万了,基本饱和了以前是新的商业模式要抢时间,会的人也少

  6. 矩阵, 矩阵 , Android基础控件之ImageView

    天下文章大家抄,以下所有内容,有来自copy,有来自查询,亦有自己的总结(目的是总结出自己的东西),所以说原创,不合适,说是转载也不恰当,所以我称之为笔记,可惜没有此分类选项,姑且不要脸一点,选择为原 ...

  7. Spark大数据处理技术

    全球首部全面介绍Spark及Spark生态圈相关技术的技术书籍 俯览未来大局,不失精细剖析,呈现一个现代大数据框架的架构原理和实现细节 透彻讲解Spark原理和架构,以及部署模式.调度框架.存储管理及 ...

  8. POJ_2001_Shortest_Prefixes_(Trie)

    描述 http://poj.org/problem?id=2001 给出一组单词,求每个单词的最小唯一前缀. 最小唯一前缀:该前缀不能是其他单词的前缀,并且最小,如果不存在,则为该单词本身. Shor ...

  9. BZOJ_3224_普通平衡树_(Treap)

    描述 http://www.lydsy.com/JudgeOnline/problem.php?id=3224 Treap模板题.支持如下几种操作: 1.插入; 2.删除; 3.rank(x); 4. ...

  10. suse系统卸载数据库实例

    1.停止数据库: 2.执行以下命令: find $ORACLE_BASE/* -name '*[Tt][Ee][Ss][Tt]*'  其中TEST为数据库的实例名: 删除存在的文件: 3.删除/etc ...