<html>

   <head>

         <meta charset="utf-8">

         <title>HelloWorld</title>

   </head>

     <body>

         <p>Hello World 1</p>

         <p>Hello World 2</p>

 <!--         <p>Hello World 1</p>

         <p>Hello World 2</p> -->

         <div id="con"></div>

         <div id="chart01"></div>

         <bottom><button type="button" onclick="myadd()">add</button><button type="button" onclick="mysort()">sort</button></bottom>

         <script src="./jquery-2.1.4.min.js" charset="utf-8"></script>

         <script src="./d3.js" charset="utf-8"></script>

         <script>

            // var p = d3.select("body").selectAll("p");

            // // p.datum("Thunder").append("span").text(function(d, i) {

            // //  return d + " " + i;

            // // });

            //  var dataset = [{"id":1, "name":"张三"},

            //  {"id":2, "name":"张三2"},

            //  {"id":3, "name":"张三3"},

            //  {"id":4, "name":"张三4"}];

            //  var update = p.data(dataset);

            //  update.text(function(d) {

            //     return d.id + "--" + d.name;

            //  });

            //  update.enter().append("p").text(function(d) {

            //     return d.id + "--" + d.name;

            //  });

            //  var condiv = d3.select(document.getElementById("con"));

            //  condiv.selectAll("span").data(dataset).enter().append("span").text(function(d) {

            //     return d.id + "---" + d.name;

            //  });

            //  var numbers = [12, 23, 25, 67, 5, 26, 19, 8];

            //  console.log(d3.min(numbers, function(d) {return d * 3;}));

            //  console.log(d3.max(numbers));

            //  console.log(d3.extent(numbers, function(d) {

            //     return d % 3;

            //  }));

            //  console.log(d3.sum(numbers));

            //  console.log(d3.mean(numbers));

            //  console.log(d3.median(numbers));

            //  console.log(numbers.sort(d3.ascendind));

            //  console.log(d3.quantile(numbers, 19.0));

             // p.data(dataset, function(d) {return d.id;}).text(function(d) {

             //    return d.id + " " + d.name;

             // });

             // console.log(update);

             // console.log(update.enter());

             // console.log(update.exit());

            // console.log(p);

             var dataset = [30, 45, 23, 69, 160, 55, 99];

             var chart01 = d3.select(document.getElementById("chart01"));

             var width = 800;

             var height = 400;

             var padding = {"top": 20, "right": 20, "left": 20, "bottom": 20};

             var rectStep = 55;

             var rectWidth = 45;

             var svg = chart01

                .append("svg")

                .attr("width", width)

                .attr("height", height);

             var rect = svg.selectAll("rect")

                .data(dataset)

                .enter()

                .append("rect")

                .attr("fill", "steelblue")

                .attr("x", function(d, i) {

                   return padding.left + i * rectStep;

                })

                .attr("y", function(d) {

                   return height - padding.bottom - d;

                })

                .attr("width", rectWidth)

                .attr("height", function(d) {

                   return d;

                });

             var text = svg.selectAll("text")

                .data(dataset)

                .enter()

                .append("text")

                .attr("text-anchor", "middle")

                .attr("fill", "white")

                .attr("x", function(d, i) {

                   return padding.left + i * rectStep;

                })

                .attr("y", function(d) {

                   return height - padding.bottom - d;

                })

                .attr("width", rectWidth)

                .attr("height", function(d) {

                   return d;

                })

                .attr("dx", rectWidth/2)

                .attr("dy", "1em")

                .text(function(d) {

                   return d;

                });

             function redraw(dataset) {

                var updateRect = svg.selectAll("rect").data(dataset);

                var enterRect = updateRect.enter();

                var exitRect = updateRect.exit();

                var updateText = svg.selectAll("text").data(dataset);

                var enterText = updateText.enter();

                var exitText = updateText.exit();

                updateRect.attr("fill", "steelblue")

                .attr("x", function(d, i) {

                   return padding.left + i * rectStep;

                })

                .attr("y", function(d) {

                   return height - padding.bottom - d;

                })

                .attr("width", rectWidth)

                .attr("height", function(d) {

                   return d;

                });

                enterRect.append("rect")

                .attr("fill", "steelblue")

                .attr("x", function(d, i) {

                   return padding.left + i * rectStep;

                })

                .attr("y", function(d) {

                   return height - padding.bottom - d;

                })

                .attr("width", rectWidth)

                .attr("height", function(d) {

                   return d;

                });

                exitRect.remove();

                updateText.attr("text-anchor", "middle")

                .attr("fill", "white")

                .attr("x", function(d, i) {

                   console.log("de-->" + d + "\t-->" + i + "\te-->" + (padding.left + i * rectStep));

                   return padding.left + i * rectStep;

                })

                .attr("y", function(d) {

                   return height - padding.bottom - d;

                })

                .attr("width", rectWidth)

                .attr("height", function(d) {

                   return d;

                })

                .attr("dx", rectWidth/2)

                .attr("dy", "1em")

                .text(function(d) {

                   return d;

                });

                enterText.append("text")

                .attr("text-anchor", "middle")

                .attr("fill", "white")

                .attr("x", function(d, i) {

                   console.log("d-->" + d + "\t-->" + i + "\te-->" + (padding.left + i * rectStep));

                   return padding.left + i * rectStep;

                })

                .attr("y", function(d) {

                   return height - padding.bottom - d;

                })

                .attr("width", rectWidth)

                .attr("height", function(d) {

                   return d;

                })

                .attr("dx", rectWidth/2)

                .attr("dy", "1em")

                .text(function(d) {

                   return d;

                });

                exitText.remove();

             }

             function myadd() {

                dataset.push(Math.floor(Math.random() * 100));

                console.log(dataset);

                redraw(dataset);

             }

             function mysort() {

                dataset.sort(d3.ascending);

                redraw(dataset);

             }

         </script>

     </body>

 </html>

d3.js <一>的更多相关文章

  1. D3.js学习（七）

    上一节中我们学会了如何旋转x轴标签以及自定义标签内容,在这一节中,我们将接触动画(transition) 首先,我们要在页面上添加一个按钮,当我们点击这个按钮时,调用我们的动画.所以,我们还需要在原来 ...

  2. D3.js学习（一）

    从今天开始我将和大家一起学习D3.js(Data-Driven Documents),由于国内关于D3的学习资料少之又少,所以我觉得很有必要把自己学习过程记录下来,供同学们参考,如果文章有有哪些表达有 ...

  3. D3.js学习记录

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  4. D3.js部署node环境开发

    总结一段D3.js部署node环境的安装过程 准备阶段: 首先电脑上要安装node环境,这个阶段过滤掉,如果node环境都不会装,那就别玩基于node环境搞的其他东西了. 搭建环境: 我在自己的F:系 ...

  5. d3.js读书笔记-1

    d3.js入门 d3入门 D3是一个强大的数据可视化工具,它是基于Javascript库的,用于创建数据可视化图形.在生成可视化图形的过程中,需要以下几步: 把数据加载到浏览器的内存空间: 把数据绑定 ...

  6. 【 D3.js 进阶系列 — 6.1 】 缩放的应用（Zoom）

    缩放(Zoom)是另一种重要的可视化操作,主要是使用鼠标的滚轮进行. 1. zoom 的定义 缩放是由 d3.behavior.zoom() 定义的. var zoom = d3.behavior.z ...

  7. [资料搜集狂]D3.js数据可视化开发库

    偶然看到一个强大的D3.js,存档之. D3.js 是近年来十分流行的一个数据可视化开发库. 采用BSD协议 源码:https://github.com/mbostock/d3 官网:http://d ...

  8. D3.js 用层画条形图

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  9. 【 D3.js 入门系列 --- 3 】 做一个简单的图表！

    前面说了几节,都是对文字进行处理,这一节中将用 D3.js 做一个简单的柱形图. 做柱形图有很多种方法,比如用 HTML 的 div 标签,或用 svg . 推荐用 SVG 来做各种图形.SVG 意为 ...

  10. 【 D3.js 入门系列 --- 2.1 】 关于如何选择，插入，删除元素

    在D3.js中,选择元素的函数有两个:select 和 selectAll . 先说明一下它们的区别: select 是选择所有指定元素的第一个 selectAll 是选择指定元素的全部(以用于后面同 ...

随机推荐

  1. hdu 5444 Elven Postman（根据先序遍历和中序遍历求后序遍历）2015 ACM/ICPC Asia Regional Changchun Online

    很坑的一道题,读了半天才读懂题,手忙脚乱的写完(套上模板+修改模板),然后RE到死…… 题意: 题面上告诉了我们这是一棵二叉树,然后告诉了我们它的先序遍历,然后,没了……没了! 反复读题,终于在偶然间 ...

  2. margin四个元素的顺序

    如果margin给的是四个值比如:margin:0px 0px 0px 0px;代表:margin: top right bottom left代表从上右下左,顺时针方向.如果margin给的是三个值 ...

  3. Chapter6：函数

    执行函数的第一步是(隐式地)定义并初始化它的形参.所以,函数最外层作用域中的局部变量也不能使用与函数形参一样的名字. 局部静态变量:在程序的执行路径第一次经过对象定义语句时初始化,并且直到程序终止才被 ...

  4. [转] 編程風格要素-The Elements of Programming Style 中文英文中英對照

    转自: http://www.loliman3000.com/tech/2fe33ce32906f0302412881.php 下面的程序風格規則提煉自Brian Kernighan和P. J. Pl ...

  5. 如何创建Asp.net MVC ViewModel

    ASP.NET MVC View Model Patterns Since MVC has been released I have observed much confusion about how ...

  6. 《学习OpenCV》练习题第四章第一题a

    #include <highgui.h> #include <cv.h> #pragma comment (lib,"opencv_calib3d231d.lib&q ...

  7. 第三百四十八天 how can I 坚持

    回来的倒不晚,算了不想抱怨了. 晚上回来吃过饭,又看了遍<活着>,把一切悲剧都放在一个人身上了,很朴实,好感人. 一天就写了一个借口,也是醉了. 我的天气预报,我的struts.sprin ...

  8. Active Record快速入门指南

    一.概述 Active Record(中文名:活动记录)是一种领域模型模式,特点是一个模型类对应关系型数据库中的一个表,而模型类的一个实例对应表中的一行记录.关系型数据库往往通过外键来表述实体关系,A ...

  9. [转]软件开发过程(CMMI/RUP/XP/MSF)是与非？

    经常看到和听到大家在争论敏捷过程.RUP和CMM 哪个软件开发过程更好或者哪个过程不好,各自都有理由.争论得不亦乐乎......实际上,没有十全十美的过程,也不存在更好的过程.关键是什么样的过程适合自 ...

  10. 【125】固定IP的电脑配置无线路由

    标题所提到的情况即为有些电脑是用静态IP上网的,与普通的宽带连接稍微有些不同,例如我的电脑的静态IP设置是这样的: 只有按照上面的设置才可以正常上网,因此在配置无线路由器的时候也要用到上面的内容,废话 ...