<!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. SVN - 配置

    版本控制器 1.创建文件夹 svn 2.打开终端 进入该文件夹 3.输入 svnadmin 如果有错 xcrun: error: active developer path ("/Appli ...

  2. 30年的Hello world

    30 年的 Hello world 转载自:http://www.admin10000.com/document/2398.html 最近我在7月4日这一天所在的那周休假了.休假期间,我利用大把的时间 ...

  3. java版 正文抽取 基于文字连接比

    package cn.tdt.crawl.jdbc; import java.util.regex.Matcher; import java.util.regex.Pattern; import or ...

  4. Java SE/ME/EE的概念介绍

    转自 Java SE/ME/EE的概念介绍 多数编程语言都有预选编译好的类库以支持各种特定的功能,在Java中,类库以包(package)的形式提供,不同版本的Java提供不同的包,以面向特定的应用. ...

  5. Wordpress 网站搭建及性能监控方法详解！

    前言 说到 Wordpress,大家往往想到的是博客,其实,如今的 WordPress 已经成为全球使用量最多的开源 CMS 系统.并且,如果你有一定的技术基础稍加改动,就可以搭建出新闻网站.企业网站 ...

  6. Wild Words

    poj1816:http://poj.org/problem?id=1816 题意:给你n个模板串,然后每个串除了字母,还有?或者*,?可以代替任何非空单个字符,*可以替代任何长度任何串,包括空字符串 ...

  7. POJ 2886 Who Gets the Most Candies?（反素数+线段树）

    点我看题目 题意 :n个小盆友从1到n编号按顺时针编号,然后从第k个开始出圈,他出去之后如果他手里的牌是x,如果x是正数,那下一个出圈的左手第x个,如果x是负数,那出圈的是右手第-x个,游戏中第p个离 ...

  8. [译]GotW #1: Variable Initialization 续

    Answer 2. 下面每行代码都做了什么? 在Q2中,我们创建了一个vector<int>且传了参数10和20到构造函数中,第一种情况下(10,20),第二种情况是{10, 20}. 它 ...

  9. Deep Learning论文笔记之（八）Deep Learning最新综述

    Deep Learning论文笔记之(八)Deep Learning最新综述 zouxy09@qq.com http://blog.csdn.net/zouxy09 自己平时看了一些论文,但老感觉看完 ...

  10. 【转】win7 虚拟机virtualbox中ubuntu12.04安装samba实现文件共享

    原文网址:http://blog.csdn.net/watkinsong/article/details/8878786 昨天心血来潮,又装了个虚拟机,然后安装了ubuntu12.04,为了实现在虚拟 ...