精华内容
下载资源
问答
  • D3js快速入门——用最新版D3js实现树图
    千次阅读
    2021-08-14 22:50:45

    引言

    上周我们组新开项目,技术调研之后决定使用 d3.js 做数据可视化开发,mentor让我来做初期技术调研,之后的技术交流会与大家分享。可是初期的调研着实碰壁了 网上一些demo用的版本过低,包括d3js官网的demo也是如此,一些重要的API已废弃。
    在这里插入图片描述

    可是我们项目不打算用过低版本,于是我结合网上demo和d3文档,各种谷歌百度,总算是用最新版本实现了一些demo。想到好久没有记录学习到的技术了,趁此机会写下这篇 d3.js可视化开发快速入门博客,与大家交流分享。

    1. D3js 是什么

    近年来,数据可视化越来越流行,许多拥有大量数据的大型网站都开始使用可视化技术,使得大量杂乱的数据规则起来,易于理解,真可谓“一图胜千言”,毫不夸张。正是在这种趋势的催动下,各种数据化工具如井喷式的发展,而D3,Echarts正是其中的佼佼者。

    D3 的全称是(Data-DrivenDocuments),顾名思义是一个被数据驱动的文档。其实是对数据进行可视化的JavaScript库。D3将强大的可视化和交互技术与数据驱动的DOM操作方法相结合,能最大限度地使用现代浏览器的性能同时为设计可视化界面保留了最大的自由度。D3强调Web标准,所以无需将自己与专有框架联系起来。

    D3js 是一个可以基于数据来操作文档的 JavaScript 库。可以帮助你使用 HTML, CSS, SVG 以及 Canvas 来展示数据。D3 遵循现有的 Web 标准,可以不需要其他任何框架独立运行在现代浏览器中,它结合强大的可视化组件来驱动 DOM 操作。

    D3 可以将数据绑定到 DOM 上,然后根据数据来计算对应 DOM 的属性值。例如你可以根据一组数据生成一个表格。或者也可以生成一个可以过渡和交互的 SVG 图形。

    D3 不是一个框架,因此也没有操作上的限制。没有框架的限制带来的好处就是你可以完全按照自己的意愿来表达数据,而不是受限于条条框框,非常灵活。D3 的运行速度很快,支持大数据集和动态交互以及动画。

    2. D3js 相对其他数据可视化方案的优势

    对比D3和ECharts之前,先对比下两种浏览器图形渲染技术Canvas和SVG的主要区别,基本上所有的浏览器可视化第三方库都是基于这两种浏览器图形渲染技术实现的:

    2.1 SVG 对比 Canvas

    SVGCanvas
    矢量图不依赖分辨率,放大不失真位图依赖分辨率
    基于XML支持DOM事件处理器,SVG中每个图形节点都是单独的DOM节点可以附加js事件不支持事件处理器 如果要为细粒度的元素添加事件,就需要边缘检测算法,无疑增加了难度而且不一定能保证十分精确
    适合带有大型渲染区域的应用(比如:地图(每个节点区域都比较大,节点不是很多))最适合图像密集型的应用比如游戏 能够方便的保存结果图像
    复杂度高会减慢渲染速度(任何过度使用DOM的应用都快不了)一旦图形绘制完成,就不会再得到浏览器的关注 如果位置或者大小变化整个区域都要重新绘制
    可以使用CSS 文本渲染能力较强文本渲染能力较弱

    简单对比后,可以得出结论:
    SVG比较适合 数据量不是很大,应用存在大量的用户交互场景。

    Canvas比较适合事件交与较少,文本较少,或者数据量大画面刷新快的场景。

    2.2 D3.js 对比 Echarts

    EChartsD3
    Canvas为主4.0+也支持SVGSVG为主4.0+也支持Canvas
    提供很多图表通过简单配置可以满足大部分需求不能通过简单配置实现大部分图表
    基本不可定制自由度很大,基本可以自己绘制任何图表
    提供完善中文文档,示例功能完善提供完善英文文档,3.x版本中文文档比较完善,之后翻译的不完善,部分翻译可能需求查看英文方便理解,大部分示例需要完善才能使用,主要是参考价值
    开发效率高,通过快速配置即可完成大部分图表需要开发
    大数据量性能较好需要实现时手动优化 例如virtual DOM
    提供基于WebGl的GL版实现3D图表借助其他库来实现例如:three.js、glMatrix、Sylvester

    总结
    ECharts等提供的图表的确可以满足大部分的需求,遵循了数据可视化的一些经典范式,一切皆可配置。然而,每个不同的行业对于数据可视化都会有一些定制化的需求,希望能以一些带有行业特征的图表向使用者展示数据背后隐藏的秘密,但是ECharts这类图形库基本不可定制,而D3自由度度很大,基本可以自己绘制任何想要的图形,这类情况的需求可以使用D3进行二次开发,定制适合的图表,但是开发成本会稍高。因此,开发中要根据实际情况来判断。无论采用哪种方式开发都要做好二次封装,把实现的图表成可复用的组件。

    ECharts,hightchart这类可视化库,经过配置即可完成图表的绘制,D3要稍微麻烦一点。

    使用D3绘图需要

    • 熟悉SVG(canvas)作图、熟悉CSS
    • 熟悉D3的API
    • 学习D3.js的编程风格

    总结:D3和ECharts,hightchart这类可视化库相比属于可视化中较为基础的工具库,需要一定的可视化方面的基础才能比较快速开发出较复杂的图表,可以先尝试实现简单的图形,官网首页上面就大部分酷炫的在线Demo,难度较高可以先从demo网址找些简单点来实现

    3. 怎么用 D3.js 开发一个树图

    3.1 前置基础

    想要使用D3.js做数据可视化你需要了解一些前置知识,如SVG
    首先你需要熟悉它的常用标签及属性:

    <!-- 常用标签 -->
    <svg></svg>
    <g></g>
    <circle>
    <path>
    <line>
    <rect>
    <text>
    ...
    <!--  常用属性 -->
    width height  color  transform fill stroke class d ...
    

    3.2 d3开发树图流程

    1. 根据需求确定图表类型(例如树图)

    2. 数据预处理(把输入的原始数据转化成为标准的D3可接受的数据格式一般图像是对象数组)

    3. 根据处理好的数据结合布局API作图(例如树图 :d3.hierarchy()和d3.tree()的结合使用)

    4. 再调整文本位置,间隔等细节的东西,从而让图形布局更合理

    5. 给已经完成的图形添加动画效果和事件交互

    3.3 动手实现一个树图

    3.3.1 普通tide tree

    tide tree长啥样?
    vijay的博客
    怎么实现?
    第一步:在页面中初始化设置 svg

    // 1、 选中页面给页面添加svg标签;设置Svg绘制区域的宽和高;添加g元素(svg的group分组标签元素)并设置位置。
          // Set the dimensions and margins of the diagram
          let margin = { top: 470, right: 90, bottom: 30, left: 90 };
          let width = 1960 - margin.left - margin.right;
          let height = 1200 - margin.top - margin.bottom;
          let svg = d3
            .select("body")
            .append("svg")
            .attr("width", width)
            .attr("height", height)
            .append("g")
            .attr("transform", `translate(${margin.left},${margin.top})`);
    
    

    第二步:数据预处理

     // 2、生成树状布局,设置树图布局容器尺寸。
          let tree = d3.tree().nodeSize([30, 170]);
    
          let root = d3.hierarchy(this.treeData); // 第一次数据预处理,给每个节点添加了 height depth parent 属性
    
          this.tree(root); // 第二层数据预处理 确定每个节点在图上的位置,每个节点多了x,y属性
    

    第三步:生成节点和链接

       // 4.2生成连线。
          let link = svg
            .selectAll(".link")
            .data(links)
            // .enter()
            // .append("path")
            .join("path")
            .attr("class", "link")
            .attr("fill", "none")
            .attr("stroke", "#ccc")
            .attr("d", diagonal);
          // 4.3生成节点。
          let node = svg
            .selectAll(".node")
            .data(nodes)
            .enter()
            .append("g")
            .attr("class", "node")
            .attr("transform", function (d) {
              return "translate(" + d.y + "," + d.x + ")";
            })
        
          // 4.4给节点添加圆圈,设置半径。
          node.append("circle").attr("r", 5);
          // 4.5给节点添加文本,设置文本的样式位置。
          node
            .append("text")
            .text((d) => {
              console.log("d", d);
              return d.data.name;
            })
            .attr("dx", (d) => (d.children ? -15 : 15))
            .attr("dy", 5)
            .attr("text-anchor", (d) => (d.children ? "end" : "start"));
    

    第四步:给已经完成的图形添加动画效果和事件交互,例如这里给每个节点添加点击事件和mouseover事件

     // 4.3生成节点。
          let node = svg
            .selectAll(".node")
            .data(nodes)
            .enter()
            .append("g")
            .attr("class", "node")
            .attr("transform", function (d) {
              return "translate(" + d.y + "," + d.x + ")";
            })
            .on("click", (d) => {
              console.log(`----------click------------`);
            })
            .on("mouseover", () => {
              console.log(`----------hover------------`);
            });
    

    没错,正是在第三步添加节点后接着链式调用on()方法即可绑定事件
    如此,一颗简单的树就生成了!

    3.3.2 你的树图不简单—— radio tide tree

    关于树图,你是否还有其他联想?接下来我们看看一个不太“规矩”的树图——radio tide tree
    在这里插入图片描述
    radio tide tree又是如何实现的呢?
    一番摸索后,我发现这两种树图实现的差别在于:

    • d3.tree()传入参数不同
    • link对角线生成器不同
    • 节点transform设置不同
    差别tide treeradio tide tree
    d3.tree()传入参数不同[width,height][radian,radius]
    link对角线生成器不同linkHorizontal()或者linkRadial()
    节点transform设置不同x,y坐标极坐标

    具体设置方法,如下:
    切记d3.tree().size()参数为弧度和半径

     // 2、生成树状布局,设置树图布局容器尺寸。
          let tree = d3
            .tree()
            .size([2 * Math.PI, 140])
            .separation(function (a, b) {
              return (a.parent == b.parent ? 1 : 2) / a.depth;
            }); 
          let root = d3.hierarchy(this.treeData);
          
          tree(root);
    

    link对角线生成器的不同,linkRadial()

    // 4.2生成连线。
          let link = svg
            .selectAll(".link")
            .data(links)
            // .enter()
            // .append("path")
            .join('path')
            .attr("class", "link")
            .attr('fill','none')
            .attr('stroke','#ccc')
            .attr('stroke-width','1.5px')
            .attr(
              "d",
              d3
                .linkRadial()
                .angle(function (d) {
                  return d.x;
                })
                .radius(function (d) {
                  return d.y;
                })
            );
    

    节点transform设置不同,极坐标的方式设置

     // 4.3生成节点。
          // 极坐标
          function radialPoint(x, y) {
            return [(y = +y) * Math.cos((x -= Math.PI / 2)), y * Math.sin(x)];
          }
          
          let node = svg
            .selectAll(".node")
            .data(nodes)
            .enter()
            .append("g")
            .attr("class", "node")
            .attr("stroke", "red")
            .attr("transform", d => `
            rotate(${d.x * 180 / Math.PI - 90})
            translate(${d.y},0) 
          `) // return "translate(" + radialPoint(d.x, d.y) + ")";
    

    此处可上滑与tide tree代码进行对比,观察不同

    3.3.3 更多可能——更多类型的树图

    当然,树图的具体实现效果绝不仅此两种,可以预见的是,符合树型特点的图皆可称之为树图,它们对数据的层次结构要求皆相同
    例如:
    indented tree
    在这里插入图片描述
    Tangled tree visualization II
    在这里插入图片描述
    Sunburst
    在这里插入图片描述
    看了这么多炫酷的tree,不如自己去操作一番!!
    在这里插入图片描述
    文中所用demo已上传到github仓库:demo地址链接https://github.com/coder-WJie/D3-test/tree/

    D3js 官网:https://d3js.org/

    更多相关内容
  • 这是一个用于将 d3js 图形保存为 PDF/PNG/SVG 文件的概念验证演示。 客观的 CGI 接受传入的 SVG 序列化。 使用图形工具包打开 SVG 序列化作为输入,输出 PNG 或 PDF 作为输出。 这个 perl 实现只是在rsvg-convert上...
  • D3JS-股票图表 绘制Yahoo!的历史股票数据D3JS可视化库财务。
  • d3js-v4中文文档.pdf

    2020-01-21 13:40:10
    D3 V4版本中文API文档PDF版,与V3版本不同之处就在于添加了canvas功能,同时API的调用方式也有所改动,比如axis、layout.tree等等
  • d3js流程图代码

    2019-04-09 21:40:51
    使用d3js开发的js流程图,功能完善,支持事件操作,缩小,放大,平移,选中,保存流程图数据,动态加载流程图数据等功能
  • D3js-示例 图表的 D3Js 动画示例
  • 这是d3.js入门版(和Continuer :) )存储库,该存储库在我的d3.js项目中使用。 它可以帮助我快速启动,继续和完成d3项目 其他内容和帮手 外部链接 组件 内部连结 大批 通过...分组 订购 orderByDescending 字符串...
  • 我们鼓励使用D3JS库 避免使用外部框架,例如jQuery,AngularJS或React JS。 以最适合您的需求的格式加载数据模型。 避免任何后端开发/依赖性。 如果您认为需要加载外部数据,请对其进行模拟。 圆圈内的趋势图不是...
  • dl-diag-d3js 深度学习架构图-D3.js库 出版物中的典型人工神经网络图很难看或难以理解。 让我们改变它! 主意 (我们超越了想法,要做统一的能量。) 网路 典型网络 网络部分 类似于Colah的小型图表 可见类型 抽象...
  • 使用D3js绘制图形D3js是应用在web开发上的开源JS组件库,是一个数据可视化工具。D3的全称是Data-DrivenDocuments(数据驱动文档),在github上关注数量超过了2万人,是非常受欢迎的开源工具。使用d3的有开发者,有设计...
  • Gantt-Chart:基于D3.js的一个甘特图基本实现
  • 使用d3.js做的一个拓扑展示的js工具
  • d3js教程两本d3js数据可视化和精通d3js d3js教程两本d3js数据可视化和精通d3js d3js教程两本d3js数据可视化和精通d3js
  • 基于D3.js布局显示树的Vue组件
  • d3js-spring-boot d3js游乐场
  • 使用d3.js绘制组织关系图,有横向和纵向的以及箭头流向,连接线文字描述,层级折叠。
  • d3快速地图 使用 d3js 创建交互式等值线图 特征: albesUSA 投影 州和县边界 读取 csv 文件,csv google doc 工具提示 自动图例,自定义图例 自动配色方案,您自己的自定义颜色 分类或线性数据
  • 利用d3js绘制漂亮的React 3D饼状图
  • VizHub - 使用D3.js和SVG进行数据可视化教学和学习的平台
  • 但是d3.js的功能是有代价的:它需要某种程度的对Javascript技术和高度熟悉,以完全理解它的工作原理。 另一方面,p5.js(Java处理框架的新实现)的设计非常简单,特别是对于不熟练的Java编码人员而言,使其在艺术...
  • StreamlineD3 为开发人员提供一种创建动态D3.js可视化与实时数据的简单方法
  • script src =" https://unpkg.com/d3-3d/build/d3-3d.js " > </ script > <!-- OR --> < script src =" https://unpkg.com/d3-3d/build/d3-3d.min.js " > </ script > 对于特定版本: ...
  • R的D3 JavaScript网络图 开发版本:0.4.9000 本自述文件包括有关设置的信息和一些基本示例。 有关更多信息,请参见软件包的。 用法 这是simpleNetwork的示例: library(networkD3) # Create fake data src <- ...
  • D3.js:使用Web标准实现数据可视化的JavaScript
  • 【无需积分】 D3.js可视化库可以绘制曲线图。资源中xml文件包含了所有数据点,js文件调用D3库绘图,html文件展示绘图结果,css文件改变绘图样式。可以使用IE浏览器打开。
  • 基于d3.js的simulation力导图,canvas实现的带缩略图的关系图谱案例
  • D3js图表 使用 D3.js 进行数据可视化 #如何使用 点击这里下载最新版本: 或者,要直接链接到最新版本,请复制以下代码段: [removed][removed] 克隆此存储库或将整个项目下载为 .zip 文件夹。
  • 使用d3js强制有向图实现的DC Metro地图 这是一个实验项目,使用力向图表示华盛顿特区的WMATA Metro系统。 它允许选择和显示计划的路线,列车预测以及预测的列车在网络中的非常近似的位置。 用法 单击地铁站以显示或...
  • d3-弧线图 D3的布局( ) 例子: 原料药 d3。 arcDiagram () 使用默认配置创建新的弧形图布局。 布局是根据绑定数据计算节点和边缘位置的功能,可以使用以下功能进行配置。 配置后,运行布局功能以计算节点...
  • D3JS的简单学习

    千次阅读 2022-03-23 17:07:44
    D3JS的简单学习

    前言

    D3JS的简单学习

    D3JS教程

    安装

    npm install d3
    import * as d3 from "d3";
    

    选择元素

    select() : 通过匹配给定的CSS选择器,仅选择一个DOM元素.如果给定的CSS选择器有多个元素,则只选择第一个元素.
    selectAll() : 通过匹配给定的CSS选择器来选择所有DOM元素

    例如:

    d3.select("div")
    d3.select(".myclass").text()
    d3.select("#hello").text()
    

    常用方法

    text: 读写文字内容

    //读
    d3.select('#pie').text()
    //写,会替换原来的内容
    d3.select('#pie').text('eee');
    

    append: 将新元素作为当前选择中元素的最后一个子元素追加。 此方法还可以修改元素的样式,其属性,HTML和文本内容。

    d3.select('#pie').append('span').text('aa');
    

    这个试了一下,只能添加标签

    html: 读取和设置html

    d3.select('#pie').html()
    

    试了一下,标签内部是文字就返回文字,是html就返回html。追加时会替换掉原来的内容

    attr: 读写html的属性

    d3.select('#pie').attr('title')
    

    试了一下只能读写到当前对象,对应对象内部的html无法读取到。

    style: 只能读写当前对象的样式

    d3.select('#pie').style('color','red');
    console.log(d3.select('#pie').style('color'));
    

    一次只能读写一个样式

    classed:用于设置HTML元素的"class"属性

    //添加类
    d3.select(".myclass").classed("myanotherclass", true);
    //删除类
    d3.select(".myclass").classed("myanotherclass", false);
    //检查是否存在该类
    d3.select(".myclass").classed("myanotherclass");
    

    selectAll: 选择符合条件的所有元素

    数据连接

    什么是数据连接?

    数据连接使我们能够注入,修改和删除元素(HTML元素)以及基于现有HTML文档中的数据集的嵌入式SVG元素.默认情况下,数据集中的每个数据项对应于文档中的元素(图形).
    随着数据集的变化,也可以轻松操作相应的元素.数据连接在我们的数据和文档的图形元素之间创建了一种紧密的关系.数据连接使得基于数据集的元素操作变得非常简单和容易.

    四种方法:

    datum: 用于为HTML文档中的单个元素设置值。 一旦使用选择器选择元素,就会使用它。

    <p></p>
    d3.select('p')
      .datum(50)
      .text(function(d) {
          return '在p标签里添加的值是:' + d;
      });
    

    在这里插入图片描述
    从结果来看可以用来添加变量

    data: 用于将数据集分配给HTML文档中的元素集合。 使用选择器选择HTML元素后使用它。

    <ul id="list">
        <li>5</li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
    
     d3.select('#list').selectAll('li')
                .data([10, 0, 30, 25, 15])
                .text((d) => d);
    

    在这里插入图片描述
    第一点:只写data是无效的,必须使用texthtml这类的来写入数据
    第二点:写入的数据会替换掉原来的数据
    第三点:如果dom元素不存在,就不会生效

    enter: 输出之前没有图形元素的数据项集。

    这个挺难理解的,特地查了一下。以下面这个例子为例:

    <ul id="list">
        <li></li>
    </ul>
    
     d3.select('#list').selectAll('li')
                .data([10, 20, 30, 25, 15])
                .text(function(d) { return '之前存在的 ' + d; })
                .enter()
                .append('li')
                .text(function(d) { return '后来创建的 ' + d; });
    

    在这里插入图片描述
    data里有5个数据,实际上只一个li元素。这里enter起的作用就相对于占位,占位后通过append往这个位置放入一个元素

    exit: 输出不再存在数据的图形元素集。

    <ul id="list">
        <li></li>
        <li></li>
        <li>多余的</li>
        <li>多余的</li>
    </ul>
    
    d3.select('#list').selectAll('li')
                .data([10, 20])
                .text(d => d)
                .exit()
                .remove();
    

    实际上有4个元素,但是data里只有两个数据。exit 作用相对于来标识那些是多余的,再通过remove可以将多与的删除

    Data Function
    在使用data后,原来的text等方法内部可以使用匿名函数,匿名函数里可以获取到对应的值和索引

    <ul id="list">
        <li></li>
        <li></li>
    </ul>
    
     d3.select('#list').selectAll('li')
                .data([10, 20])
                .text((d,i) => {
                    console.log('值:',d,',索引:',i,',this:',this);
                    return d;
                });
    

    在这里插入图片描述
    在这里插入图片描述

    svg

    svg的内容不介绍了,不熟悉的可以看一下:svg的简单学习 ,简单了解一些基础知识。这里主要记录使用d3来操作svg

    示例:

     // 获取容器并创建一个svg
    d3.select('#svgContainer').append('svg').attr('width', 300).attr('height', 300)
    // 绘制一条直线
      .append('line').attr('x1', 100).attr('y1', 100).attr('x2', 200).attr('y2', 200).style('stroke', 'blue').style('stroke-width', 2);
    

    在这里插入图片描述

    Transition 过度

    transition()方法适用于所有选择器,它启动过渡进程.此方法支持大多数选择方法,如-attr(),style()等.但是,它不支持append()和data()方法,这些方法需要在transition()方法之前调用.此外,它提供了特定于转换的方法,如duration(),ease()等.

    // 过度时间
            let t = d3.transition().duration(3000);
            d3.select('#box')
                .style('width','300px')
                .style('height','100px')
                .transition(t)
                .style('background-color', 'lightblue');
    

    在这里插入图片描述

    注: 有关很重要的地方是:过度效果只会对transition(t)后面的样式生效。比如上面的只会对背景色起过度效果。

    动画

    d3中没有animation这个东西,动画的实现还是需要基于过度

    duration: 过度时间

     d3.selectAll("h3").transition().style("color","green").duration(5000);
    

    delay: 延迟

    d3.select('#box')
        .style('width','300px')
        .style('height','100px')
                    .transition()
        .style('background-color', 'lightblue')
        .delay(2000).duration(2000);
    

    绘制图表

    柱状图

    // 数值
    var data = [10, 5, 12, 15];
    // 定义svg的宽
    var width = 500;
    // 定义 缩放到屏幕上可见的像素值。
    var scaleFactor = 20;
    // 柱状图的高
    var barHeight = 30;
    
    // 获取到一个svg
    var graph = d3
        .select('#box')
        .append('svg')
        .attr('width', width)
        .attr('height', barHeight * data.length);
    
    
    // g标签分组用的
    var bar = graph
        .selectAll('g')
        .data(data)
        .enter()
        .append('g')
        // 平移确定4个柱状图的位置
        .attr('transform', function (d, i) {
            return 'translate(0,' + i * barHeight + ')';
        });
    
    // 绘制矩形
    bar.append('rect')
        .attr('width', function (d) {
            // 10*20 = 200 像素值
            // 直接返回 '200px' 也可以
            return d * scaleFactor;
        })
        .attr('height', barHeight - 1)
    // 设置柱状图的填充颜色
        .attr('fill','red');
    
    
    // 添加文本
    bar.append('text')
    // 通过偏移量来设置文本的位置
        .attr('x', function (d) {
            return d * scaleFactor;
        })
        .attr('y', barHeight / 2)
        .attr('dy', '.35em')
        // 设置文字颜色
        .attr('fill','blue')
        .text(function (d) {
            return d;
        });
    

    在这里插入图片描述
    饼图

    在开始绘制饼图之前,我们需要了解以下两种方法:
    d3.arc()方法
    d3.pie()方法
    让我们详细了解这两种方法。
    d3.arc()方法:d3.arc()方法生成一个弧。 您需要为弧设置内半径和外半径。 如果内半径为0,则结果将为饼图,否则结果将为圆环图
    d3.pie()方法:d3.pie()方法用于生成饼图。 它从数据集中获取数据并计算饼图的每个楔形的起始角度和结束角度。

    从网上找了个例子,从头捋顺了一下

    <svg id="abc" />
    
    // 创建一个svg
    let svg = d3.select('#abc').append('svg').attr('width',350).attr('height',400);
    // 数据源
    let data = [{label: '电影',value: 50},{label: '电视剧',value: 60},{label: '动漫',value: 100}];
    // 颜色
    let colors = ['#5c84f2','#C8D0E6','#dddddd'];
    // 创建一个饼图
    let pie = d3.pie().value(d => d.value);
    // 饼图数据
    let pieData = pie(data);
    // 创建饼图的弧路径
    let arcPath = d3.arc().innerRadius(60).outerRadius(100);
    // 创建分组,每一组里保存一个扇形信息
    let arcList = svg.selectAll('g')
        .data(pieData)
        .enter()
        .append('g')
        .attr('transform','translate(150,200)');
    // 在组里添加路径
    arcList.append('path')
        .attr('d',d => arcPath(d))
        .attr('fill',(d,i) => colors[i])
        .attr('stroke','black')
        .on('mouseover',function(e,d) {
            d3.select(this)
                .attr('fill','#f8aba6');
        })
    // e是事件对象,d是数据对象
        .on('mouseout',function(e,d) {
            d3.select(this)
                .attr('fill',colors[d.index]);
        });
    
    
    /* 上面的代码是绘制饼图,下面绘制饼图的文字    */
    
    // 绘制扇形区域的数值
    arcList.append('text')
        .attr('fill','white')
        .attr('text-anchor','middle')
        .attr('transform',function(d) {
            // 获取弧的中线点
            var x = arcPath.centroid(d)[0];
            var y = arcPath.centroid(d)[1];
            return 'translate(' + x + ',' + y + ')';
        })
        .text(d => d.value);
    
    
    // 绘制扇形区域对应的类型,就是线条加类型
    arcList.append('line')
        .attr('stroke',(d,i) => colors[i])
        .attr('x1',function(d) { return arcPath.centroid(d)[0] * 1.34; })
        .attr('y1',function(d) { return arcPath.centroid(d)[1] * 1.34; })
        .attr('x2',function(d) { return arcPath.centroid(d)[0] * 1.8; })
        .attr('y2',function(d) { return arcPath.centroid(d)[1] * 1.8; });
    
    arcList.append('text')
        .attr('fill',(d,i) => colors[i])
        .attr('transform',function(d) {
            var x = arcPath.centroid(d)[0] * 1.9;
            var y = arcPath.centroid(d)[1] * 1.9;
            return 'translate(' + x + ',' + y + ')';
        })
        .attr('text-anchor','middle')
        .text(d => d.data.label);
    

    请添加图片描述

    展开全文

空空如也

空空如也

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

d3js

友情链接: MammothCopy.rar