<!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. bzoj 1023: [SHOI2008]cactus仙人掌图 tarjan缩环&&环上单调队列

    1023: [SHOI2008]cactus仙人掌图 Time Limit: 1 Sec  Memory Limit: 162 MBSubmit: 1141  Solved: 435[Submit][ ...

  2. 纯js将form表单的数据封装成json 以便于ajax发送

    使用方式: var json = form2Json("formId");//这里的参数是form表单的id值 form2json.js function form2Json(fo ...

  3. java api如何获取kafka所有Topic列表,并放置为一个list

    kafka内部所有的实现都是通过TopicCommand的main方法,通过java代码调用API,TopicCommand.main(options)的方式只能打印到控制台,不能转换到一个list. ...

  4. Linq查询出结果集中重复数据

    private List<FMDS_FarmPlotNewInfo> GetSame(List<FMDS_FarmPlotNewInfo> lst) { List<FMD ...

  5. [LeetCode] 315. Count of Smaller Numbers After Self (Hard)

    315. Count of Smaller Numbers After Self class Solution { public: vector<int> countSmaller(vec ...

  6. 基于mongoDB的capped collection的性能优化

    MonitorLogging改造(消息接入) 改造前架构: 可以看出原来的流程中,大量业务分析,业务接入耦合在web服务层.大量操作,导致线程线性的挂起线程. 改造后: 将业务通讯抽象成为Monito ...

  7. （转载）Flash Builder和flashdevelop 常用快捷键

    (转载)http://www.fantxi.com/blog/archives/fb-fd-shortcut/ =========flashdevelopCtrl+B - snippetsctrl+s ...

  8. 深入学习JS: __doPostBack函数

    在.NET中,所有的服务器控件提交到服务器的时候,都会调用__doPostBack这个函数,所以灵活运用这个函数对于我们的帮助还是很大的. 比如,在我们写程序的时候经常会需要动态的生成一些控件,最简单 ...

  9. format 对整形的应用

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

  10. Action中取得request，session的四种方式

    Action中取得request,session的四种方式 在Struts2中,从Action中取得request,session的对象进行应用是开发中的必需步骤,那么如何从Action中取得这些对象 ...