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. Excel下拉框选项切换行颜色切换

    选择行颜色变化范围 开始-条件格式-新创建规则-"使用公式-" 录入:=$104B="确认" 点击"格式(F)-"->填充,选择填充颜 ...

  2. HTML5+CSS3鼠标悬停图片特效

    点击预览效果            下载该特效: HTML5+CSS3鼠标悬停图片特效.zip 特效说明: 一款HTML5+CSS3鼠标悬停图片事件网页特效,集合了最流行鼠标悬停图片文字.图片动画移动 ...

  3. 记录一次配置unix网络编程环境的过程和遇到的问题

    记录一次搭建unix网络编程环境过程中遇到的问题和总结 计算机环境虚拟机 linuxmint-18-xfce-64bit 1.打开unix网络编程.iso 把目录下的文件复制到某一目录,修改权限,可命 ...

  4. SPRING IN ACTION 第4版笔记-第三章ADVANCING WIRING-003-@Conditional根据条件生成bean及处理profile

    一.用@Conditional根据条件决定是否要注入bean 1. package com.habuma.restfun; public class MagicBean { } 2. package ...

  5. CCS3.3之DM642开发环境建立

    使用的仿真器是SEED-XDSUSB2.0/5V. 之前用的是CCS2.2,换成了CCS3.3的. 1.安装CCS3.3.38.在我安装完后,并没有急着升级,升级的程序是SR12_CCS_v3.3_S ...

  6. 【HDOJ】2149 Public Sale

    看Discuss说是博弈论,没学到这个分类.不过仔细想了想,发现.如果m<=n,那么可能结果为m,m+1...n.否则,如果m%(n+1) == 0,那么无论如何都会输,因为无论先报价什么数,如 ...

  7. WCF - net.pipe vs. net.tcp vs. http Bindings

    WCF - net.pipe vs. net.tcp vs. http Bindings 问题: I'm new to WCF and would like to know the differenc ...

  8. JVM Monitoring: JMX or SNMP?

    JVM Monitoring: JMX or SNMP? By daniel on Feb 23, 2007 Since JavaTM SE 5.0, the JRE provides a means ...

  9. 查找mysql数据文件存放路径

    show variables like 'datadir%'; show variables当前的会话,是系统参数 是静态 show global variables全局 show status是系统 ...

  10. JavaScript数学函数的操作

    <script> var a=3.14; var a1=Math.ceil(a);//大于当前小数的最小整数; alert(a1); var a2=Math.floor(a);//小于当前 ...