<!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之手势滑动返回功能－b

    iOS中如果不自定义UINavigationBar,通过手势向右滑是可以实现返回的,这时左边的标题文字提示的是上一个ViewController的标题,如果需要把文字改为简约风格,例如弄过箭头返回啥的 ...

  2. VMware下打开Chrome OS遇到没有网络连接可用

    打开ChromeOS.vmx文件,最后一行添加 ethernet0.virtualDev = "e1000" 就能解决.

  3. Log4j与common-logging

    Log4j与common-logging 总网上搜了些Log4j与common-logging的介绍,记录下. 一．Log4j  1.简介 Log4j是Apache的一个开放源代码项目 使用Log4j ...

  4. nodejs对静态文件目录的处理

    Serving static files in Express To serve static files such as images, CSS files, and JavaScript file ...

  5. cisco上的RIP V2加上MD5认证配置测试成功

    R1: Router#show run Building configuration... Current configuration : bytes ! version 12.3 service t ...

  6. FFMPEG-数据结构解释(AVCodecContext,AVStream,AVFormatContext)

    http://blog.csdn.net/yuan892173701/article/details/8702333 AVCodecContext  这是一个描述编解码器上下文的数据结构,包含了众多编 ...

  7. 猜测：信号槽的本质是使用Windows的自定义消息来实现的

    在不断执行: void MyTool::DeleteAllFiles(){ for (i = 0; i <= n - 1; i++) { // do something }}在for循环没有执行 ...

  8. 在ListView中使用多个布局

    要想在一个ListView中使用多个布局文件,比如一个信息List包含了一个信息标题和每个信息对应的时间. 关键的步骤是实现Adapter类的getItemViewType 和getViewTypeC ...

  9. MVC3 IIS7部署记录

    环境 系统:Win7 IIS:IIS7 开发工具:VS2010 MVC版本:ASP.NET MVC 3.0 注意 1.在部署MVC应用之前,一定要确保你的程序BIN文件夹下面是否包含 System.W ...

  10. BZOJ1345: [Baltic2007]序列问题Sequence

    1345: [Baltic2007]序列问题Sequence Time Limit: 5 Sec  Memory Limit: 162 MBSubmit: 556  Solved: 274[Submi ...