精华内容
下载资源
问答
  • Vue.D3.tree Vue组件可基于D3.js布局显示图形。 Tree Live演示https://david-desmaisons.github.io/Vue.D3.tree/tree用法 从'vued3tree'导入{tree}导出默认{组件:{树},data(){返回{树:{名称:“父亲”,子代:...
  • 滑出D3.js和C3.js 练习sass,bourbon,d3.js和c3.js。 喜欢它拥有数据可视化的乐趣。 派生代码并通过ptyhon服务器或您拥有的任何服务器在本地提供代码
  • d3.min.js d3.js

    千次下载 热门讨论 2014-08-25 17:11:25
    d3.min.js d3.js 绘制图标
  • 最新版的dagre-d3.js d3.js 可用于网页动态绘制流程图 亲测可用 ,解决了在IE内不能显示的问题 使用时直接调用即可
  • d3.js-demo:一些小的d3.js的demo,欢迎大家下载
  • 在自学D3.js过程中看过的两本书,这两本书的特点是结合案列讲的很详细,适合快速入门和提升,附件为pdf高清版资料。
  • d3.js-network-topology 网络拓扑图 效果
  • 全称为“data-driven Documents”,3个d嘛,简称d3.js。使用的话,官网上面有下载连接,就是一个zip压缩包。解压后把里面的d3.js引入就可以使用了,它并需要使用npm来安装,就是一个普通的js文件罢了,就像我们使用...

     d3.js官网https://d3js.org/。全称为“data-driven Documents”,3个d嘛,简称d3.js。使用的话,官网上面有下载连接,就是一个zip压缩包。解压后把里面的d3.js引入就可以使用了,它并需要使用npm来安装,就是一个普通的js文件罢了,就像我们使用jquery,下载下来引入就可以使用了,方法是一样的。

          

    d3.js是干嘛的呢?

            大家有用过类似的图表展现工具吧,比如百度的echarts,国外的highcharts之类的,d3.js跟这些图标插件很类似,都是用来做数据可视化的,常说“一张图胜过千言万语”,在如今的大数据时代,数据的可视化显得尤为重要,而d3.js在这方面做得很是突出,d3.js也被称为操作svg的jquery,因为d3.js的图表都是基于svg的,在操作svg方面的语法与jquery的方法很是类似。

    我们来看一个例子,实现的功能是使用d3.js在网页中写入“hello d3.js”,网页结构如下:

    1

    2

    3

    4

    5

    6

    7

    8

    9

    10

    <!DOCTYPE html>

    <html>

        <head>

            <meta charset="utf-8">

            <title>index</title>

            <script src="d3.min.js"></script>

        </head>

        <body>

        </body>  

    </html>

    使用d3.js的JavaScript代码:

    1

    2

    3

    4

    <script>

        var body=d3.select("body");

        body.append("h1").text("hello d3.js");

    </script>

    打开这个网页:

    image.png

    使用d3.js在页面上画个圆圈

     为了熟悉d3.js的api,我们通过一个小小的案例来领略一下d3.js的风采。这个案例很简单,就是使用d3.js在页面上画一个圆形,最终的效果如下图所示:

        image.png

    以下是代码:

    1

    2

    3

    4

    5

    6

    7

    8

    9

    10

    11

    12

    13

    14

    15

    16

    17

    18

    <!DOCTYPE html>

    <html>

        <head>

            <meta charset="utf-8">

            <title>index</title>

            <script src="d3.min.js"></script>

        </head>

        <body>

        </body>

    <script>

        var body=d3.select("body");

        //body元素尾部添加一个svg标签

        var svg=body.append("svg").attr("width",300).attr("height",300);

        //svg尾部添加一个circle标签并设置属性

        svg.append("circle").attr("cx",100).attr("cy",100).attr("r",50)

        .attr("fill","#123456").attr("stroke","red").attr("stroke-width","2px");

    </script>

    </html>

    代码解释:

         d3.select用于获取html文档中的元素,里面的参数是css选择器,返回值是单个的经过d3封装的html元素。

         append方法用于在调用者尾部附加一个元素,

         attr(属性名,属性值)用于设置调用该方法的元素的属性,具体属性名是什么,自然跟调用该方法的元素有关,比如width和height都是svg元素有的属性,而下面的cx,cy都是svg里面的cricle标签的属性,可不是我随便乱写的。

        学习过我前边写的svg相关的教程的同学都知道,最后一行的fill,stroke这些都是样式,对这些样式的控制我们最好还是写在css里,然后使用d3.js把这个css类加上就可以了,因此可以如下修改代码:

    1

    2

    3

    4

    5

    6

    7

    8

    9

    10

    11

    12

    13

    14

    15

    16

    17

    18

    19

    20

    21

    22

    23

    24

    25

    <!DOCTYPE html>

    <html>

        <head>

            <meta charset="utf-8">

            <title>index</title>

            <script src="d3.min.js"></script>

            <style>

                .mycircle{

                    fill:#123456;

                    stroke:red;

                    stroke-width:2px;

                }

            </style>

        </head>

        <body>

        </body>

    <script>

        var body=d3.select("body");

        //body元素尾部添加一个svg标签

        var svg=body.append("svg").attr("width",300).attr("height",300);

        //svg尾部添加一个circle标签并设置属性

        svg.append("circle").attr("cx",100).attr("cy",100).attr("r",50)

        .attr("class","mycircle");

    </script>

    </html>

    d3的update对象、enter对象、exit对象

    先看下面的例子:

    1

    2

    3

    4

    5

    6

    7

    8

    9

    10

    11

    12

    13

    14

    15

    16

    17

    18

    19

    20

    21

    22

    23

    24

    25

    <!DOCTYPE html>

    <html>

        <head>

            <meta charset="utf-8">

            <title>index</title>

            <script src="d3.min.js"></script>

        </head>

        <body>

            <div>div1</div>

            <div>div2</div>

            <div>div3</div>

        </body>

    <script>

        var divs=d3.selectAll("div");

        //divs是经过d3包装的元素数组

        console.log(divs);

        var arr=["a","b","c"];

        var update=divs.data(arr);

        //update对象是已经绑定了数据集的选择集

        console.log(update);

        update.text(function(val,index){

            return "坐标:"+index+",值:"+val;

        });

    </script>

    </html>

    执行结果:

    image.png

    selectAll:返回的是经过d3包装的元素数组,称为d3的选择集

    data用于把数组的元素依次绑定到选择集的元素上,有点类似es6里面解构赋值的意思。

    datum也是绑定数据,和data()的区别在于datum是直接绑定数据到选择集上,并不存在"解构",如divs.datum(arr);则每个div将被绑定a,b,c

    上面我说了,update对象就是绑定了数据集的选择集,在上面的这个例子中,选择集的长度是3,数据集的长度也是3,正好可以一一对应,但是现实的业务不可能这么完美,两者总有不相等的时候。

    一、当选择集divs的大小>数据集arr的长度时

            这个时候如果要想让他们一一对应,我们应该把divs中的多余的元素给找到并删除,可以这样理解,在d3.js中找到的多余的选择集里面的元素就是exit对象,把数据arr改为两个长度:

    1

    2

    3

    4

    5

    6

    7

    8

    9

    10

    11

    12

    13

    14

    15

    16

    17

    18

    19

    20

    21

    22

    23

    24

    25

    26

    27

    28

    29

    <!DOCTYPE html>

    <html>

        <head>

            <meta charset="utf-8">

            <title>index</title>

            <script src="d3.min.js"></script>

        </head>

        <body>

            <div>div1</div>

            <div>div2</div>

            <div>div3</div>

        </body>

    <script>

        var divs=d3.selectAll("div");

        //divs是经过d3包装的元素数组

        console.log(divs);

        var arr=["a","b"];

        var update=divs.data(arr);

        //update对象是已经绑定了数据集的选择集

        console.log(update);

        update.text(function(val,index){

            return "坐标:"+index+",值:"+val;

        });

        //此时有多余的div,找到(exit)并删除

        var  exit= update.exit();

        console.log(exit);

        exit.remove();

    </script>

    </html>

    添加exit.remove();前后的结果对比:

    image.png image.png

    二、当选择集divs的大小<数据集arr的长度时

            此时要想对应,需要多补几个选择集的元素,补几个?补什么元素?都是通过d3.js可以控制的:

    1

    2

    3

    4

    5

    6

    7

    8

    9

    10

    11

    12

    13

    14

    15

    16

    17

    18

    19

    20

    21

    22

    23

    24

    25

    26

    27

    28

    29

    30

    31

    32

    33

    34

    <!DOCTYPE html>

    <html>

        <head>

            <meta charset="utf-8">

            <title>index</title>

            <script src="d3.min.js"></script>

        </head>

        <body>

            <div>div1</div>

            <div>div2</div>

            <div>div3</div>

        </body>

    <script>

        var divs=d3.selectAll("div");

        //divs是经过d3包装的元素数组

        console.log(divs);

        var arr=["a","b","c","d","e"];

        var update=divs.data(arr);

        //update对象是已经绑定了数据集的选择集

        console.log(update);

        update.text(function(val,index){

            return "坐标:"+index+",值:"+val;

        });

         

        //增加enter对象

        //enter对象可以获取数据集多几个元素

        var  enter= update.enter();

        console.log(enter);

        //多几个就补几个p

        enter.append("p").text(function(val,index){

            return "坐标:"+index+",值:"+val;

        });

    </script>

    </html>

    增加enter对象前后结果对比:

    image.png

    image.png

     

     

    使用d3画一个没有刻度的柱形图

    最终的效果如下:

    image.png

    代码如下,html代码:

    1

    2

    3

    4

    5

    6

    7

    8

    9

    10

    11

    12

    13

    14

    15

    <!DOCTYPE html>

    <html>

        <head>

            <meta charset="utf-8">

            <title>index</title>

            <script src="d3.min.js"></script>

            <style>

                .bar{

                    fill:#123456;

                }

            </style>

        </head>

        <body

        </body>

    </html>

    d3画柱形图代码:

    1

    2

    3

    4

    5

    6

    7

    8

    9

    10

    11

    12

    13

    14

    15

    16

    17

    <script>

        var dataset=[20,30,70,10,50];

        var body= d3.select("body");

        var svg=body.append("svg").attr("width",500).attr("height",300);

        var bars=svg.selectAll(".bar").data(dataset).enter().append("rect")

                .attr("class","bar")

                .attr("x",function(val,index){

                    return 30*index+50;

                })

                .attr("y",function(val,index){

                    return 300-val-50;

                })

                .attr("width",25)

                .attr("height",function(val,index){

                    return val;

                })

    </script>

    其他的都好理解,可能你不能理解的地方在于

    attr("y",function(val,index){

    return 300-val-50;

    })

    这一段,这一段的作用是让各个柱子都处在离svg下边缘50px的位置,也就是说让所有柱子都位于一条水平线上,如果不这样,那就不叫柱形图了,变成k线图了....,为什么写上“300-val-50”就可以位于一条水平线上了呢?看下面的图:

    image.png

    rect的y坐标是从上往下数的,这样子就应该理解了吧。

    柱形图的完善---引入d3.js中的比例尺

    在d3.js中,有很多种比例尺,常用的有两种。什么叫做比例尺呢?这个我相信大家心里都有个内化于心的概念,在d3.js中,我说的直白点,就是把一组值映射为另一组值,在这个映射的过程中,关系保持不变。那么为什么需要比例尺呢?在“使用d3画一个没有刻度的柱形图”上篇文章里面,设置柱状图的高度,我使用的代码是

    1

    2

    3

    attr("height",function(val,index){

                    return val;

                }

    也就是说,我直接使用了数据集里面元素的值作为柱状图的高度,因为数据集是var dataset=[20,30,70,10,50];整个svg大小我设置的宽高分别为500px和300px,并没有看出问题,可是我并不能担保在真正使用的时候数据集永远不会超过svg的大小,也就是说数据集里面有了个2000的值怎么办?就显示不了了呀,这就是问题的所在。因此需要引入比例尺。

    d3.js中的两种比例尺:

    一、线性比例尺

    1

    2

    3

    4

    5

    6

    7

    8

    9

    10

    var dataset=[20,3000,70,100,2.5,0];

    var min = d3.min(dataset);

    var max = d3.max(dataset);

    var linear = d3.scaleLinear()

            .domain([min, max])

            .range([0, 250]);

     

    console.log(linear(0));    //返回 0

    console.log(linear(3000));    //返回 250

    console.log(linear(1500));    //返回 125

    我这里使用的是d3的最新版本v5.0.0,在d3-v3的版本中,得到比例尺的写法是d3.scale.linear(),不管哪种写法,只是版本的不同罢了,返回的都是比例尺的对象,这个对象是个函数,因此我们后边可以直接使用linear(1500)的方式来写,其实就是调用的函数,参数是原来的数字,返回值为经过比例尺转化后的数字。domain([最小,最大])指定原来的值范围,range([最小,最大])指定映射范围。

    二、序数比例尺

    上边的线性比例尺指定的是范围、区间,可以映射这个区间内任意的值。但是,有时候我们需要映射的可能是离散的值,比如我想把[1,2,3]映射为["a","b","c"];使用线性比例尺就不行了,而应该使用序数比例尺。

    1

    2

    3

    4

    5

    6

    7

    8

    var dataset=[1,2,3];

            var ordinal = d3.scaleOrdinal()

                    .domain(dataset)

                    .range(["a","b","c"]);

     

            console.log(ordinal(1));    //返回 a

            console.log(ordinal(2));    //返回 b

            console.log(ordinal(3));    //返回 c

    比例尺介绍完了,我们把上篇文章里面的柱状图改善一下:

    1

    2

    3

    4

    5

    6

    7

    8

    9

    10

    11

    12

    13

    14

    15

    16

    17

    18

    19

    20

    21

    22

    23

    24

    <script>

        var dataset=[20,30,70,10,50];

        //定义比例尺

        var min = d3.min(dataset);

        var max = d3.max(dataset);

        var linear = d3.scaleLinear()

                .domain([0, max]) //注意,这里不要用[min,max],不然最小的柱子高度就是0了,导致看不到

                .range([0, 250]);

         

        var body= d3.select("body");

        var svg=body.append("svg").attr("width",500).attr("height",300);

        var bars=svg.selectAll(".bar").data(dataset).enter().append("rect")

                .attr("class","bar")

                .attr("x",function(val,index){

                    return 30*index+50;

                })

                .attr("y",function(val,index){

                    return 300-linear(val)-50;

                })

                .attr("width",25)

                .attr("height",function(val,index){

                    return linear(val);

                }); 

    </script>

    结果如下:

    image.png

    展开全文
  • d3.js

    2019-07-02 14:28:15
    D3.js入门教程_D3.js开发中文手册-极客学院Wiki: http://wiki.jikexueyuan.com/project/d3wiki/ Learning D3.JS - 十二月咖啡馆: http://d3.decembercafe.org/ D3.js API 中文手册: ...

    D3.js入门教程_D3.js开发中文手册-极客学院Wiki:

           http://wiki.jikexueyuan.com/project/d3wiki/

    Learning D3.JS - 十二月咖啡馆:

          http://d3.decembercafe.org/

    D3.js API 中文手册:

          https://wizardforcel.gitbooks.io/d3-api-ref/content/

     

    D3.js  select 方法解释:

    https://bost.ocks.org/mike/circles/

     

     

    展开全文
  • D3.js

    2020-08-15 15:14:50
    D3.js 是什么? 怎么使用D3.js?

    D3.js 是什么?

     

    怎么使用 D3.js?

    展开全文
  • 从今天起我给大家分享一下D3.js ,D3是一个JavaScript的函数库,D3 的全称是 Data-Driven Documents,我这边不做多介绍,本次分享只想着给大家分享一点干货。    有些同学应该听过Echarts、Highcharts、Chart.js...

           从今天起我给大家分享一下D3.js ,D3是一个JavaScript的函数库,D3 的全称是 Data-Driven Documents,我这边不做多介绍,本次分享只想着给大家分享一点干货。
           
           有些同学应该听过Echarts、Highcharts、Chart.js等等,要知道这些都是基于D3封装的,熟悉D3的人能做出一个属于自己的Highcharts或者Echarts,但是熟悉Highcharts的人却写不出Echarts,更写不出D3,好了 不多说直接撸代码。


                                                                                                 第一篇

    1. 查找节点
     select、selectAll

    //#d3 可以向jQuery一样链式调用,可以一直链下去
    d3.select('#odiv');
    d3.select('body').select('div');
    d3.select('body div p');//select只会选中第一个节点
    d3.selectAll('body div p');//这样就能全部选中了
    d3.selectAll('body div .opo');

     

    2. D3提供了6中设置属性的方法:
    attr、classed、style、property、text、html

    let p = d3.select('body').selectAll('p');
    p.attr('name','p');//attr:属性添加
    p.classed('1',true).classed('2',false);//classed 会根据第二个值判断是否为true,如果为true则添加这个class,如果不为true则不会添加
    p.style('height','10px').style('background','tomato');//css样式
    d3.select('#inp').property("value");//这样就能获取到input框里的内容了
    d3.select('#inp').property("value",'hello world');//这样可以修改input框里的内容
    p.text('opo');//文本
    p.html('<div>123</div>');//和js中的innerHTML一样

     

    3.添加、插入、删除节点

    let body = d3.select('body');
    body.append('p');//末尾处添加一个p标签
    body.insert('p','#p');//在#p前面插入
    d3.select('#p').remove();//删除#p

     

    4.数据绑定:datum()、data()
    // 这两个方法都是会添加一个__data__这个属性

    let arr = [1,2,3];
    let p = d3.selectAll('body p');
    p.datum(arr); // __data__:[1,2,3]
    p.data(arr); // 第一个p标签的__data__属性为:1,第二个p标签的__data__属性为:2,第三个p标签的__data__属性为:3

     

    本文讲了查找节点方式、设置属性的方法、节点操作、数据绑定 ,怎么样学会了吗?

    有想一起学习D3的朋友可以加QQ群881658075,一起学习进步

    展开全文
  • r语言 编辑 d3.jsby Matt Oxley 由马特·奥克斯利(Matt Oxley) d3.js的语言介绍 (A linguistic introduction to d3.js) 如何从一个试探者变成一个自信的用户 (How to go from a tentative to a confident user) ...
  • js/d3.min.jsby Sohaib ... 在5分钟内学习D3.js (Learn D3.js in 5 minutes) 创建数据可视表示的简介 (An introduction to creating visual representations of your data) D3.js is a JavaScript library used t...
  • comic.js, 用于 HTML5 Canvas & Raphael.js & D3.js & SVG.js的卡通样式图 comic.jsJavascript库,用作 Raphael.js,D3.js, SVG.js 或者作为 HTML5 Canvas 插件的插件,提供动画样式绘制的功能。 请在 comic.js ...
  • d3.js折线图by Sohaib Nehal 通过Sohaib Nehal 学习使用D3.js创建折线图 (Learn to create a line chart using D3.js) 使用D3.js的功能绘制漂亮的数据表示形式。 (Use the power of D3.js to draw beautiful ...
  • d3.js dagre-d3.js使用中的坑

    千次阅读 2019-08-15 17:44:01
    使用d3.js dagre-d3.js使用中的坑 在vue项目中,使用d3.js,dagre-d3.js进行流程图的开发,已经开发完成,今天突然不行了,console中报错: vue.runtime.esm.js?2b0e:619 [Vue warn]: Error in mounted hook: ...
  • D3.js 该存储库包括我使用构建的所有可视化文件。 你可以在我的网站上找到他们!
  • d3.js 数据可视化负数Making Data-Visualizations using D3.js 使用D3.js进行数据可视化 What is it? 它是什么? According to d3js.org (where you will download d3.js) D3.jsis a JavaSc...
  • Sunburst提供了依赖D3.js的可重用的vue sunburst图表组件。 森伯斯特(Sunburst)是该库的主要组件,它基于数据道具显示森伯斯特图表,使用child属性作为层次结构,name属性作为命名属性,size属性作为圆弧大小。 ...
  • D3.js数据可视化项目[视频] 这是发布的的代码存储库。 它包含从头到尾完成视频课程所需的所有支持项目文件。 关于视频课程 如果您要创建沉浸式且有趣的数据可视化项目,那么D3.js是适合您的工具。 它简化了将任意...
  • [d3.js] d3.js 数据可视化 (英文版)

    热门讨论 2014-03-15 12:39:04
    [Packt Publishing] d3.js 数据可视化 (英文版) [Packt Publishing] Data Visualization with d3.js (E-Book) ☆ 图书概要:☆ Mold your data into beautiful visualizations with d3.js Overview Build ...
  • 这只是D3.js书籍中的代码示例集(下面的参考)。 演示是 其他例子: * 参考 影片 [创建图形] 图书 D3.js 在Github用户提交代码时创建直方图指示g。 .classed() d3.max 建立图表 条形图 散点图(或气泡图) ...
  • D3.js-utm:Cole Chalupka撰写; D3.js上我的CCT470作业#4文件的存储库
  • D3.js 是一个基于数据操作文档JavaScript库。D3帮助你给数据带来活力通过使用HTML、SVG和CSS。D3重视Web标准为你提供现代浏览器的全部功能,而不是给你一个专有的框架。结合强大的可视化组件和数据驱动方式Dom操作。...
  • d3.js 数据可视化负数 我们的目标是学习数据基础 (Our goal is to learn the basics of data) You'll learn the basics of data visualization using D3 through this project. 您将通过该项目学习使用D3进行数据...
  • D3.js in Action Second Edition D3.js实战 2018年最新版 原书第二版 pdf格式 386页
  • Learning Data Visualization with D3.js 中文字幕 使用D3.js学习数据可视化 中文字幕Learning Data Visualization with D3.js 创建数据驱动的可视化和信息图形在多个设备上运行是一项艰巨的挑战 D3.js库通过更容易...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 12,570
精华内容 5,028
关键字:

d3.js