精华内容
参与话题
问答
  • d3.min.js d3.js

    千次下载 热门讨论 2014-08-25 17:11:25
    d3.min.js d3.js 绘制图标
  • 在自学D3.js过程中看过的两本书,这两本书的特点是结合案列讲的很详细,适合快速入门和提升,附件为pdf高清版资料。
  • 最新版的dagre-d3.js d3.js 可用于网页动态绘制流程图 亲测可用 ,解决了在IE内不能显示的问题 使用时直接调用即可
  • 从今天起我给大家分享一下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,一起学习进步

    展开全文
  • 第二章  我们上篇文章讲到了数据绑定datum()、data(),相信都已经会用了,但是如果 "数组长度 ≠ 元素数量"不一致,就会带来3个选择集:update、enter、exit //...

                                                                                                       第二章

          我们上篇文章讲到了数据绑定datum()、data(),相信都已经会用了,但是如果 "数组长度 ≠ 元素数量"不一致,就会带来3个选择集:update、enter、exit

    //数组长度 大于 元素数量时,则说明有部分不存在的元素,即将进入可视化(enter);
    //数组长度 小于 元素数量时,则说明有部分多余的元素,即将移出可视化(exit);
    //数组长度 等于 元素数量时,则绑定数据的元素,即将被更新(update);
     

    <div id="odiv">
        <p></p>
        <p></p>
        <p></p>
    </div>

    //1.第一种情况 目前odiv里面有三个p,但是数组长度为6,则说明有部分不存在的元素,所以我们要添加不存在的元素
    //#enter

    let p = d3.select('#odiv').selectAll('p');//选中#odiv下面所有的p
    let arr = [1,5,6,4,2,3];//数组
    let update = p.data(arr);//给每一个元素绑定对应的数据
    p.text((d,i)=>{//第一个是表数据,第二个是索引
        return d;
    });
    let enter = update.enter();
    enter.append('p').text((d)=>d);


     

    //2.第二种情况 目前odiv里面有三个p,数组长度为2,则说明有部分多余的元素,所以我们要删除多余的元素
    //#exit

    let p = d3.select('#odiv').selectAll('p');
    let arr = [2,6];
    let update = p.data(arr);
    p.text((d)=>d);
    let exit = update.exit();
    exit.remove();


     

    //3.在不知道数组长度的情况下,一般都用一下模板来解决

    let arr = [10,20,30];
    let p = d3.select('#odiv').selectAll('p');
    //#绑定数据之后,分别获取update、enter、exit部分
    let update = p.data(arr);
    let enter = update.enter();
    let exit = update.exit();
    //#1.update部分的处理方法
        update.text(d=>d);
    //#2.enter部分的处理方法
        enter.append('p')
             .text(d =>d);
    //#3.exit部分的处理方法
        exit.remove();


    本文讲了updateenterexit,怎么样学会了吗?

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

    展开全文
  • comic.js, 用于 HTML5 Canvas & Raphael.js & D3.js & SVG.js的卡通样式图 comic.jsJavascript库,用作 Raphael.js,D3.js, SVG.js 或者作为 HTML5 Canvas 插件的插件,提供动画样式绘制的功能。 请在 comic.js ...
  • D3.js Quick Start Guide

    2018-10-19 09:15:52
    This book will take you from the basics of D3.js, so that you can create your own interactive visualizations, to creating the most common graphs that you will encounter as a developer, scientist, ...
  • D3.js是一个帮助开发者操纵基于数据的文档的JavaScript类库,在《D3.js实现柱状图的方法详解》中已经给大家介绍过如何用D3.js来实现一个简单的柱状图了,今天我们来学习用D3.js来实现折线图,感兴趣的朋友们下面来...
  • D3.js in Action 第2版

    2018-04-19 09:27:53
    D3.js in Action, Second Edition is completely revised and updated for D3 v4 and ES6. It's a practical tutorial for creating interactive graphics and data-driven applications using D3. Purchase of the...
  • D3.js介绍 D3.js 是一个基于数据操作文档JavaScript库。D3帮助你给数据带来活力通过使用HTML、SVG和CSS。D3重视Web标准为你提供现代浏览器的全部功能,而不是给你一个专有的框架。结合强大的可视化组件和数据驱动...
  • D3.js 4.x Data Visualization - Third Edition by Andrew Rininsland English | 28 Apr. 2017 | ASIN: B01MG90SSJ | 308 Pages | AZW3 | 6.6 MB Key Features Build interactive and rich graphics and ...
  • D3.js

    2017-02-06 14:32:05
    最近开始研究d3js。 先安利两个Demo 1、Circle Dragging IV 来自:Mike Bostock <!DOCTYPE html> <meta charset="utf-8"> <style> path { pointer-events: all; fill: none; stroke: #...

    最近开始研究d3js

    先安利两个Demo

    1、Circle Dragging IV

    来自:Mike Bostock

     

    <!DOCTYPE html>
    <meta charset="utf-8">
    <style>
    
    path {
      pointer-events: all;
      fill: none;
      stroke: #666;
      stroke-opacity: 0.2;
    }
    
    .active circle {
      stroke: #000;
      stroke-width: 2px;
    }
    
    </style>
    <svg width="960" height="500"></svg>
    <script src="https://d3js.org/d3.v4.min.js"></script>
    <script>
    
    var svg = d3.select("svg"),
        width = +svg.attr("width"),
        height = +svg.attr("height"),
        radius = 32;
    
    var circles = d3.range(20).map(function() {
      return {
        x: Math.round(Math.random() * (width - radius * 2) + radius),
        y: Math.round(Math.random() * (height - radius * 2) + radius)
      };
    });
    
    var color = d3.scaleOrdinal()
        .range(d3.schemeCategory20);
    
    var voronoi = d3.voronoi()
        .x(function(d) { return d.x; })
        .y(function(d) { return d.y; })
        .extent([[-1, -1], [width + 1, height + 1]]);
    
    var circle = svg.selectAll("g")
      .data(circles)
      .enter().append("g")
        .call(d3.drag()
            .on("start", dragstarted)
            .on("drag", dragged)
            .on("end", dragended));
    
    var cell = circle.append("path")
      .data(voronoi.polygons(circles))
        .attr("d", renderCell)
        .attr("id", function(d, i) { return "cell-" + i; });
    
    circle.append("clipPath")
        .attr("id", function(d, i) { return "clip-" + i; })
      .append("use")
        .attr("xlink:href", function(d, i) { return "#cell-" + i; });
    
    circle.append("circle")
        .attr("clip-path", function(d, i) { return "url(#clip-" + i + ")"; })
        .attr("cx", function(d) { return d.x; })
        .attr("cy", function(d) { return d.y; })
        .attr("r", radius)
        .style("fill", function(d, i) { return color(i); });
    
    function dragstarted(d) {
      d3.select(this).raise().classed("active", true);
    }
    
    function dragged(d) {
      d3.select(this).select("circle").attr("cx", d.x = d3.event.x).attr("cy", d.y = d3.event.y);
      cell = cell.data(voronoi.polygons(circles)).attr("d", renderCell);
    }
    
    function dragended(d, i) {
      d3.select(this).classed("active", false);
    }
    
    function renderCell(d) {
      return d == null ? null : "M" + d.join("L") + "Z";
    }
    
    </script>


    2、GitHub Visualizer

     

    更多gallery :https://github.com/d3/d3/wiki/Gallery

    后续更新

    展开全文
  • 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

    2013-12-12 14:11:21
    https://github.com/mbostock/d3/wiki/API-Reference
  • 全称为“data-driven Documents”,3个d嘛,简称d3.js。使用的话,官网上面有下载连接,就是一个zip压缩包。解压后把里面的d3.js引入就可以使用了,它并需要使用npm来安装,就是一个普通的js文件罢了,就像我们使用...
  • Apress.Pro.D3.js.pdf

    2019-11-01 23:49:06
    Go beyond the basics of D3.js to create maintainable, modular, and testable charts and to package them into a library that can be distributed as open source software or kept for private use....

空空如也

1 2 3 4 5 ... 20
收藏数 6,498
精华内容 2,599
关键字:

d3.js