<!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. iOS开发之本地化

    一.简介 * 使用本地化功能,可以轻松地将应用程序翻译成多种语言,甚至可以翻译成同一语言的多种方言 * 如果要添加本地化功能,需要为每种支持的语言创建一个子目录,称为”本地化文件夹”,通常使用.lpr ...

  2. caller和callee的区别

    ①.caller caller返回一个函数的引用,这个函数调用了当前的函数. 使用这个属性要注意: 1 这个属性只有当函数在执行时才有用 2 如果在javascript程序中,函数是由顶层调用的,则返 ...

  3. 排名第一、第二的OCR软件

    排名第一.第二的OCR软件 第一:ABBYY FineReader      OCR世界排名第一,在俄罗斯获国际科技大奖奖超过卡巴斯基! 不仅仅只是文字识别,还能表格识别,版面还原,字体识别,文档结构 ...

  4. python之--条件判断和循环

    Python之判断 和其他语言一样,python同样具有条件判断和循环的操作,比如我们可以编写一个简单的判断操作:使用if关键字可以达到判断的效果,如下例: >>> test_if ...

  5. C#编译器对于dynamic对象到底做了什么

    private static void TestMethod() { //dynamic 仅仅是个占位符而已 dynamic p1 = , Y = }; //对dynamic对象p1的X属性访问通过C ...

  6. 【HDOJ】1072 Nightmare

    bfs,使用ttl进行剪枝. #include <iostream> #include <cstdio> #include <cstring> #include & ...

  7. [ZOJ 3623] Battle Ships

    Battle Ships Time Limit: 2 Seconds      Memory Limit: 65536 KB Battle Ships is a new game which is s ...

  8. 将eclipse新建项目的默认编码GBK改为UTF-8

    在eclipse下: 新建项目默认编码设置:Window->Preferences->General->Workspace->Text file encoding 将其改为UF ...

  9. 如何实现Azure虚拟网络中点到站VPN的自动重连

     在Windows Azure早期版本中,用户要在某台Azure平台之外的机器与Azure平台内部的机器建立专用连接,可以借助Azure Connect这个功能.当前的Azure版本,已经没有Az ...

  10. Java for selenium(webdriver) 环境搭建

    开发环境 1. jdk1.7 2. Eclipse 3. selenium(selenium-java-2.42.2.zip) 将下载下来的 selenium-java-2.42.2.zip 解压, ...