<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title></title>

    <style type="text/css">

        body {

            padding-top: 50px;

            padding-left: 100px;

        }

        #chart {

            width: 300px;

            height: 200px;

            border: 1px solid black;

            margin-top: 10px;

        }

        path {

            /*fill: purple;

            fill-opacity: 0.7;*/

            fill: none;

            stroke: blue;

            stroke-width: 3px;

        }

    </style>

</head>

<body>

<button onclick="updateChart('math')">Math</button>

<button onclick="updateChart('science')">Science</button>

<button onclick="updateChart('reading')">Reading</button>

<div id="chart"></div>

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

<script src="//cdnjs.cloudflare.com/ajax/libs/d3/3.5.3/d3.min.js"></script>

<script src="//cdnjs.cloudflare.com/ajax/libs/lodash.js/2.4.1/lodash.min.js"></script>

<script>

    var w = 300;

    var h = 200;

    var path;

    var subjects;

    $.getJSON('//jsbin.com/vegaqi/1.js', function(json) {

        subjects = json;

        _.keys(subjects).forEach(function(subject) {

            subjects[subject].forEach(function(d) {

                d.date = d3.time.format("%Y%m%d").parse(d.date);

                console.log(d.date);

            })

        });

        path = d3.select('#chart')

                .append('svg')

                .attr('width', w)

                .attr('height', h)

                .append('g')

                .append('path');

        updateChart('math');

    });

    function updateChart(subject) {

        var data = subjects[subject];

        var dates = _.pluck(data, 'date');

        var counts = _.pluck(data, 'count');

        var x = d3.time.scale()

                .domain(d3.extent(dates))//d3.extent(), return [min, max]

                .range([0, w]);

        var y = d3.scale.linear()

                .domain(d3.extent(counts))

                .range([h, 0]);

        var area = d3.svg.area()

                .interpolate('bundle') //This interpolate bundle is just going to give us nice, smooth curves when it interpolates the different points

                .x(function(d) {

                    return x(d.date);

                })

                .y0(function(d) {

                    return y(0);

                })

                .y1(function(d) {

                    return y(d.count);

                });

        var line = d3.svg.line()

                .interpolate('bundle') //This interpolate bundle is just going to give us nice, smooth curves when it interpolates the different points

                .x(function(d) {

                    return x(d.date);

                })

                .y(function(d) {

                    return y(d.count);

                });

        path

                .datum(data)//for only one object, path object

                .transition()

                .duration(450)

                .attr('d', line);

    }

</script>

</body>

</html>

<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title></title>

    <style type="text/css">

        body {

            padding-top: 50px;

            padding-left: 100px;

        }

        #chart {

            width: 300px;

            height: 200px;

            border: 1px solid black;

            margin-top: 10px;

        }

        path {

            fill: purple;

            fill-opacity: 0.7;

            /*fill: none;

            stroke: blue;

            stroke-width: 3px;*/

        }

    </style>

</head>

<body>

<button onclick="updateChart('math')">Math</button>

<button onclick="updateChart('science')">Science</button>

<button onclick="updateChart('reading')">Reading</button>

<div id="chart"></div>

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

<script src="//cdnjs.cloudflare.com/ajax/libs/d3/3.5.3/d3.min.js"></script>

<script src="//cdnjs.cloudflare.com/ajax/libs/lodash.js/2.4.1/lodash.min.js"></script>

<script>

    var w = 300;

    var h = 200;

    var path;

    var subjects;

    $.getJSON('//jsbin.com/vegaqi/1.js', function(json) {

        subjects = json;

        _.keys(subjects).forEach(function(subject) {

            subjects[subject].forEach(function(d) {

                d.date = d3.time.format("%Y%m%d").parse(d.date);

                console.log(d.date);

            })

        });

        path = d3.select('#chart')

                .append('svg')

                .attr('width', w)

                .attr('height', h)

                .append('g')

                .append('path');

        updateChart('math');

    });

    function updateChart(subject) {

        var data = subjects[subject];

        var dates = _.pluck(data, 'date');

        var counts = _.pluck(data, 'count');

        var x = d3.time.scale()

                .domain(d3.extent(dates))//d3.extent(), return [min, max]

                .range([0, w]);

        var y = d3.scale.linear()

                .domain(d3.extent(counts))

                .range([h, 0]);

        var area = d3.svg.area()

                .interpolate('bundle') //This interpolate bundle is just going to give us nice, smooth curves when it interpolates the different points

                .x(function(d) {

                    return x(d.date);

                })

                .y0(function(d) {

                    return y(0);

                })

                .y1(function(d) {

                    return y(d.count);

                });

        var line = d3.svg.line()

                .interpolate('bundle') //This interpolate bundle is just going to give us nice, smooth curves when it interpolates the different points

                .x(function(d) {

                    return x(d.date);

                })

                .y(function(d) {

                    return y(d.count);

                });

        path

                .datum(data)//for only one object, path object

                .transition()

                .duration(450)

                .attr('d', area);

    }

</script>

</body>

</html>

[D3] 14. Line and Area Charts with D3的更多相关文章

  1. [D3] Build an Area Chart with D3 v4

    Similar to line charts, area charts are great for displaying temporal data. Whether you’re displayin ...

  2. d3.svg.line()错误：TypeError: d3.svg.line is not a function

    var line_generator= d3.svg.line() .x(function (d,i) { return i; }) .y(function (d) { return d; }) 错误 ...

  3. D3.js使用过程中的常见问题(D3版本D3V4)

    目录 一.学习D3我必须要学习好SVG矢量图码? 二.如何理解D3给Dom节点绑定数据时的Update.Enter和Exit模式 三.D3绑定数据时用datum与data有什么不一样? 四.SVG图中 ...

  4. [D3] Start Visualizing Data Driven Documents with D3 v4

    It’s time to live up to D3’s true name and potential by integrating some real data into your visuali ...

  5. Select the JavaScript graphing libraries you would like to compare

    Select the JavaScript graphing libraries you would like to compare:             Overview Summary Fus ...

  6. JFreeChart API 说明（转）

    原地址 http://blog.csdn.net/mike_caoyong/article/details/7338160 JFreeChart目前是最好的java图形解决方案,基本能够解决目前的图形 ...

  7. JfreeChart的使用1

    JfreeChart的使用 来自: 克洛泽大地(DREG) 2008-07-03 14:35:11 先从网上找点介绍. 一.简介 WW 的发展使得基于因特网的应用程序不再局限于静态或者简单的动态内容提 ...

  8. JFreeChat

    JFreeChart教程(一) 分类: java Component2007-05-31 15:53 39849人阅读 评论(30) 收藏 举报 jfreechartimportdataset图形ap ...

  9. JFreeChart教程（一）（转）

    JFreeChart教程(一) 分类: java Component2007-05-31 15:53 35268人阅读 评论(30) 收藏 举报 jfreechartimportdataset图形ap ...

随机推荐

  1. UM分享 - 详解

    官网: http://dev.umeng.com 友盟现在发展的很壮大! 有熟为人知的社会化分享\统计分析\消息推送\即时通信\自动更新\多媒体服务等功能, 今天就其中第一项 分享功能, 做出分解. ...

  2. mooc

    Coursera 课程来源 2014年前已与斯坦福.普林斯顿等近90所大学和教育机构达成合作关系. 用户类型 主要类别为学生.求职者.公司人.其中,求职者可在Coursera上获得<成就报告&g ...

  3. bzoj 3597: [Scoi2014]方伯伯运椰子 0/1分数规划

    3597: [Scoi2014]方伯伯运椰子 Time Limit: 30 Sec  Memory Limit: 64 MBSubmit: 144  Solved: 78[Submit][Status ...

  4. Android 向系统发送一条短信

    s //向系统写一条短信 ContentValues contentValues = new ContentValues(); contentValues.put("body",& ...

  5. Android 给ListView设置Adapter

    Adapter: class MyAdapter extends BaseAdapter { private List<Person> personList; public MyAdapt ...

  6. Linux命令行及Vim简单学习记录

    Linux命令行 1.打开命令行 Ctrl+Alt+t 2.目录 显示当前目录的文件列表 ls 跳转至当前目录中的x文件夹 cd x 返回根目录 cd 3.文件 新建文件1.cpp touch ./1 ...

  7. Unity3D之资源问题处理

    你做的东西如果是100%完整版 你就用 流媒体资源 Streaming Assets http://game.ceeger.com/Manual/StreamingAssets.html 你如果是类微 ...

  8. 使用Eclipse构建GeoTools项目

    转自:http://hi.baidu.com/liushuigs/item/a62969e6667f9815585dd8b1 由于GeoTools是原本是使用Maven构建的,所以,不能直接将工程导入 ...

  9. 判斷作業系統為 64bit 或 32bit z

    有時我們在開發Windows 桌面應用程式時,會發生一些弔詭的事情,作業系統位元數就是一個蠻重要的小細節,若您寫的應用程式在Windows 的32bit 作業系統上可以完美的運行,但不見得在64bit ...

  10. format 对整形的应用

    对于整型数,会在整型值的前面以0补之 Format('this is %.7d'[1234]);             输出是:this is 0001234]