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. Controllers, Actions 和 Action Results

    Controllers, Actions 和 Action Results 原文:Controllers, Actions, and Action Results作者:Steve Smith翻译:姚阿 ...

  2. mysql 时间字段的函数 timestamp

    Mysql 里格式 时间字段的函数 DATE_FORMAT unix_timestamp - 墨墨修行的日志 - 网易博客http://jjuanxi.blog.163.com/blog/static ...

  3. 运行 maven install的时候出现错误 not a jre

    原文转自jingyan.baidu.com/article/c85b7a6464d8be003bac95fb.html (linux下我直接执行第二步,错误解决) 在使用eclipse 运行 mave ...

  4. block的是发送信号的线程，又不是处理槽函数的线程

    请问UI线程给子线程发信号,应该用哪种连接方式? 如果子线程正在执行一个函数,我发射信号去执行子线程的另一个函数,那么此时子线程到底会执行什么呢? 用信号量做的同步.第一把信号槽的事件丢到线程的事件队 ...

  5. PHP数组和Json之间的互相转换 json_encode() 和 json_decode()

    之所以要用到Json,很多时候是因为使用ajax对象时,程序与JS函数之间的数据交互.因为JS不认识PHP中的数组,PHP也不认识JS中的数组或对象.Json很好的解决了这个问题. Json简介 JS ...

  6. statspack系列3

    原文:http://jonathanlewis.wordpress.com/2006/12/27/analysing-statspack-3/ 作者:Jonathan Lewis 下面的例子中的结果并 ...

  7. Redis 入门第一发

    Redis 官网:http://redis.io/ 中文:http://www.redis.cn/topics/replication.html         http://www.redis.cn ...

  8. SourceTree + Bitbucket - 轻松云端作业

    如何新建bitbucket工程 常见流程: 1: 本地电脑 A:创建Xcode工程 2:Bitbucket网站 A:"创建"仓库 B:然后"从零开始",根据提示 ...

  9. Android Loader详解四：回调及完整例子

    onLoadFinished 这个方法是在前面已创建的装载器已经完成其加载过程后被调用．这个方法保证会在应用到装载器上的数据被释放之前被调用．在此方法中,你必须删除所有对旧数据的使用(因为它将很快会被 ...

  10. C#入门经典学习笔记一

    这篇主要讲C#的一些语法. 1.委托 委托类型声明的格式如下: public delegate void TestDelegate(string message); delegate 关键字用于声明一 ...