D3.js绘制多维饼图

最新推荐文章于 2024-02-02 10:19:42 发布
最新推荐文章于 2024-02-02 10:19:42 发布
阅读量260 收藏 1
点赞数
分类专栏： D3 文章标签： 饼图 多维饼图
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zhouyonggo/article/details/82624405
版权

实现如下效果：

多维饼图
一、json数据：
 

{
	"data": [
		[{
			"name": "metabolic process",
			"value": 3532
		}, {
			"name": "cellular process",
			"value": 2814
		}, {
			"name": "single-organism process",
			"value": 2082
		}, {
			"name": "localization",
			"value": 963
		}, {
			"name": "biological regulation",
			"value": 910
		}, {
			"name": "regulation of biological process",
			"value": 817
		}, {
			"name": "cellular component organization or biogenesis",
			"value": 704
		}, {
			"name": "response to stimulus",
			"value": 492
		}, {
			"name": "signaling",
			"value": 192
		}, {
			"name": "negative regulation of biological process",
			"value": 190
		}, {
			"name": "multi-organism process",
			"value": 165
		}, {
			"name": "positive regulation of biological process",
			"value": 163
		}, {
			"name": "reproduction",
			"value": 134
		}, {
			"name": "reproductive process",
			"value": 133
		}, {
			"name": "developmental process",
			"value": 103
		}, {
			"name": "detoxification",
			"value": 34
		}, {
			"name": "growth",
			"value": 27
		}, {
			"name": "multicellular organismal process",
			"value": 20
		}, {
			"name": "biological adhesion",
			"value": 6
		}, {
			"name": "immune system process",
			"value": 2
		}, {
			"name": "locomotion",
			"value": 2
		}, {
			"name": "cell killing",
			"value": 1
		}, {
			"name": "biological phase",
			"value": 1
		}, {
			"name": "cell aggregation",
			"value": 1
		}],
		[{
			"name": "cell",
			"value": 2606
		}, {
			"name": "cell part",
			"value": 2591
		}, {
			"name": "membrane",
			"value": 2195
		}, {
			"name": "organelle",
			"value": 2056
		}, {
			"name": "membrane part",
			"value": 1934
		}, {
			"name": "organelle part",
			"value": 1054
		}, {
			"name": "macromolecular complex",
			"value": 962
		}, {
			"name": "membrane-enclosed lumen",
			"value": 417
		}, {
			"name": "extracellular region",
			"value": 69
		}, {
			"name": "supramolecular complex",
			"value": 31
		}, {
			"name": "virion",
			"value": 23
		}, {
			"name": "virion part",
			"value": 23
		}, {
			"name": "nucleoid",
			"value": 12
		}, {
			"name": "extracellular region part",
			"value": 2
		}],
		[{
			"name": "catalytic activity",
			"value": 3101
		}, {
			"name": "binding",
			"value": 2701
		}, {
			"name": "transporter activity",
			"value": 367
		}, {
			"name": "nucleic acid binding transcription factor activity",
			"value": 193
		}, {
			"name": "structural molecule activity",
			"value": 144
		}, {
			"name": "molecular function regulator",
			"value": 95
		}, {
			"name": "signal transducer activity",
			"value": 37
		}, {
			"name": "transcription factor activity, protein binding",
			"value": 35
		}, {
			"name": "antioxidant activity",
			"value": 32
		}, {
			"name": "electron carrier activity",
			"value": 26
		}, {
			"name": "molecular transducer activity",
			"value": 18
		}, {
			"name": "metallochaperone activity",
			"value": 3
		}, {
			"name": "nutrient reservoir activity",
			"value": 2
		}, {
			"name": "translation regulator activity",
			"value": 2
		}, {
			"name": "protein tag",
			"value": 2
		}]
	],
	"size": {
		"width": 960,
		"height": 900
	},
	"params": {
		"width": 300,
		"title": "GO Classification",
		"sub_title": ["BP", "CC", "MF"],
		"show_label": false
	}
}

二、用到的js插件
#jquery插件

<script src="jquery-1.8.3.min.js"></script>
#d3 v3版本插件

<script src="d3-3.min.js"></script>
#多维饼图的实现文件
<script src="multipie.js"></script>

三、多维饼图的调用
var content = $.parseJSON($('textarea').val()); //从textarea里面取出多维饼图的json数据并转化为object
graph.multiPie("container", content);   //把生成的饼图放在#container里面

四、以下为多维饼图的代码实现（D3.js实现）

/* globals jQuery: true, d3: true */
var graph = {
	multiPie:function(container, content)
	{
		//此处也可以用d3自带的颜色生成器
        var colors = ["#388E3C", "#F44336", "#0288D1", "#FF9800", "#727272", "#E91E63", "#673AB7", "#8BC34A", "#2196F3", "#D32F2F", "#FFC107", "#BDBDBD", "#F8BBD0", "#3F51B5", "#CDDC39", "#009688", "#C2185B", "#FFEB3B", "#212121", "#FFCCBC", "#BBDEFB", "#0099CC", "#FFcc99"];
		
        var pie_width = content.params.width;
        var pie_height = content.params.width;

        var margin = {
            top:50,
            left:30,
            right:30,
            bottom:20,
        };

        var lengths = [];

        var group_lengths = [];

        for (var i in content.data) {
            lengths.push(content.data[i].length);
            if (lengths.length == 3) {
                group_lengths.push(d3.max(lengths));
                lengths = [];
            }
        }

        if (lengths.length > 0) {
            group_lengths.push(d3.max(lengths));
            lengths = [];
        }

        console.log(group_lengths);
        
        var width  = pie_width * content.data.length + margin.left+margin.right;

        var height = 0;

        var per_group_y = [0];
        for (var i in group_lengths) {
            var legend_min_height = group_lengths[i] <= 2 ? group_lengths[i] * 7 : 0;
            height += pie_height + group_lengths[i] * 22 + legend_min_height;
            per_group_y.push(height);
        }

        height += margin.top;

        console.log(per_group_y);

		var svg = d3.select('#'+container).append('svg')
            .attr('version', '1.1')
			.attr('style', 'font-family:arial')
			.attr('xmlns', 'http://www.w3.org/2000/svg')
			.attr('width', width)
			.attr('height', height);

        var word_len = 22;
        svg.append('text').text(content.params.title).attr('x', (width - word_len * content.params.title.length)/2).attr('y', 20).attr('font-size', '20px');

        var main_group = svg.append('g').attr('class', 'main_group').attr('transform', "translate("+margin.left+","+margin.top+")");

        var min_size = d3.min([content.params.width, content.params.height]);
		// 得到饼图的比例计算
		var pie = d3.layout.pie()
			.sort(null)
			.value(function(d) {
				return d.value;
			});

        // 计算弧形路径

        // 根据画布大小算一个合适的半径
        var radius = pie_width *0.8/2;

        var arc = d3.svg.arc()
            .innerRadius(5)
            .outerRadius(radius)

        var arc_text = d3.svg.arc()
            .innerRadius(5)
            .outerRadius(radius * 2.2);

        var word_len = 11;
		for (var key in content.data){
            var main_x = parseInt(key) %3 * pie_width;
            var main_y = per_group_y[Math.floor(parseInt(key) / 3)];
            var main = main_group.append('g').attr('class', 'g'+key).attr('transform', "translate("+main_x+", "+(main_y)+")").attr('class', 'main_'+key);

            var sub_obj  = main.append('g').attr('class', 'sub_'+key).attr('transform', "translate(0, 20)");

            main.append('text').text(content.params.sub_title[key]).attr('x', (pie_width - word_len * content.params.sub_title[key].length)/2).attr('y', 15).attr('style', 'font-size:12px');

            var sub_x = (pie_width/2);
            var sub_y = min_size/2;
            var sub_main = sub_obj.append('g').attr('transform', "translate("+sub_x+", "+sub_y+")").attr('class', 'sub_main_'+key);

            var content_data = content.data[key];
            var pie_data = pie(content_data);

            

            //添加弧形

            var pie_path = sub_main.selectAll('g')
                .data(pie_data)
                .enter()
                .append('path')
                .attr('fill', function(d, i) {
                    return colors[i%colors.length];
                })
                .attr('d', function(d) {
                    return arc(d);
                })
                .attr('path', key)
                .attr('class', function(d, i) {
                    return 'path_'+i;
                });

                pie_path.on('mouseover', function(d,i) {
                    var key = d3.select(this).attr('path');
                    d3.select(this).attr('stroke', '#000');
                    if (typeof(content.params.show_label) != 'undefined' && content.params.show_label === false) {
                        d3.select('.main_'+key).select('.sub_main_'+key).select('.sub_text_'+i).attr('opacity', 1.0);
                    }
                    d3.select('.main_'+key).select('.sub_legend_'+key).select('.legend_'+i).select('text').attr('fill', colors[i%colors.length]).attr('style', 'font-weight:bold');
                })
                .on('mouseout', function(d,i) {
                    var key = d3.select(this).attr('path');
                    d3.select(this).attr('stroke', '');
                    if (typeof(content.params.show_label) != 'undefined' && content.params.show_label === false) {
                        d3.select('.main_'+key).select('.sub_main_'+key).select('.sub_text_'+i).attr('opacity', 0.0);
                    }
                    d3.select('.main_'+key).select('.sub_legend_'+key).select('.legend_'+i).select('text').attr('fill', '#000').attr('style', 'font-weight:normal');
                });
                

            var text_obj = sub_main.append('g').attr('class', 'sub_label_'+key);

            var texts = text_obj.selectAll('.texts'+key)
                .data(pie_data)
                .enter()
                .append('text')
                .attr('class', function(d, i) {
                    return 'texts'+key+' '+ 'sub_text_'+i;
                })
                .attr('transform', function(d) {
                    return "translate("+arc_text.centroid(d)+")";
                })
                .attr('text-anchor', function(d) {
                    if ((d.startAngle  +d.endAngle) / 2 < Math.PI) {
                        return "beginning";
                    } else {
                        return "end";
                    }
                })
                .attr('font-size', '10px')
                .text(function(d) {
                    return d.data.value;
                });

                if (typeof(content.params.show_label) != 'undefined' && content.params.show_label === false) {
                    texts.attr('opacity', 0);
                }

            var legend_obj = sub_obj.append('g').attr('transform', 'translate('+(pie_width/5)+','+(pie_width)+')').attr('class', 'sub_legend_'+key);

            legend_obj.selectAll('.legend')
                .data(pie_data)
                .enter()
                .append('g')
                .attr('class', function(d, i) {
                    return "legend legend_"+i;
                })
                .attr('transform', function(d, i) {
                   return "translate(0, "+(i * 20)+")";
                })
                .attr('path', key)
                .each(function(d, i) {
                    var self = d3.select(this);
                    self.append('circle')
                        .attr('cx', 0)
                        .attr('cy', 0)
                        .attr('r', 5)
                        .attr('fill', colors[i%colors.length]);
                    self.append('text')
                        .text(d.data.name)
                        .attr('font-size', '10')
                        .attr('text-anchor', 'start')
                        .attr('transform', "translate(10, 4)")
                        .attr('cursor', 'pointer')
                })
                .on('mouseover', function(d, i) {
                    var self = d3.select(this);
                    var key  = self.attr('path');
                    d3.select('.main_'+key).select('.sub_main_'+key).select('.path_'+i).attr('stroke', '#000');
                    self.select('text').attr('fill', colors[i % colors.length])
                        .attr('style', 'font-weight:bold');

                    if (typeof(content.params.show_label) != 'undefined' && content.params.show_label === false) {
                        d3.select('.main_'+key).select('.sub_main_'+key).select('.sub_text_'+i).attr('opacity', 1);
                    }
                })
                .on('mouseout', function(d, i) {
                    var self = d3.select(this);
                    var key  = self.attr('path');
                    d3.select('.main_'+key).select('.sub_main_'+key).select('.path_'+i).attr('stroke', '');
                    
                    self.select('text').attr('fill', '#000')
                        .attr('style', 'font-weight:normal');

                    if (typeof(content.params.show_label) != 'undefined' && content.params.show_label === false) {
                        d3.select('.main_'+key).select('.sub_main_'+key).select('.sub_text_'+i).attr('opacity', 0.0);
                    }
                });;



        }

	}
};

以上就是多维饼图的全部实现，如果有不清楚的地方可以留言，欢迎交流

 

 

 

 

 

 

 

 

风/xin云
关注
专栏目录
【D3.js】极坐标系下的柱状图
神以灵的博客
06-04 2774
极坐标系的柱状图 虽然标题是柱状图，但其实使用arc饼图生成器画得，所以感觉叫饼图也可以~~ 预览 LIVE DEMO API 使用到的部分api d3.scaleLinear 线性比例尺，类似一个线性函数，通过domain属性定义输入域，range属性定义值域，例如： var x = d3.scaleLinear() .domain([10, 130]) .range(...
数据可视化之饼图，反映多个维度数据的百分比构成
dsrj410的博客
04-27 1571
开头，小编套用一句马云的话：数据将成为社会发展最重要的生产资料，计算能力将成为一种强大的生产力。是的，数据对于工作的重要性可想而知。 在当今大数据时代，信息泛滥、算力膨胀，数据不是太少而是太多，在这繁杂的大数据中，如何能够快速找到价值数据，并依靠数据去发现问题、分析问题、解决问题、跟踪问题，这时就需要数据可视化出场了。 那么看到市面上很多好看的数据可视化大屏效果你可能觉得遥不可及，但是一个好工具做辅助，你就成功了一半！国内有一些围绕可视化做一些应用产品/系统/平台，比如发展较好的有：阿里云Da.
d3.js 好看的饼图，多层边框，装饰点
04-24
d3.js 好看酷炫的饼图，多层边框，装饰点，围绕饼图生成文字。多颜色文字
使用HTML5 SVG绘制的多层饼形图（纯javascript）
C++与Web
01-14 3393
代码实在是太繁琐，所以这里先贴出效果图 效果图一 不同的字体大小，颜色（可设置） 文字可以多行，不同间距（可设置） 饼形图文字随角度旋转（可设置） 不同级别的饼形图半径（可设置） 根据填充数字填充的饼形图区域（可设置）
数据大屏中，饼图也可呈现多维度的数据关系
迪赛智慧数的博客
03-17 1106
实际工作中，我们会发现数据并非单一的指向，而是包含复杂层次化的数据。如何能够对复杂层次化数据进行直观形象的可视化分析展示？多层次数据绘制到同一张图表中去？ 从数据分析的直观性而言，文字表达永远没有图表来得直观。很多时候，我们不得已要用到饼图，但是传统的饼图是不是太单调？而又不知道怎么实现多图表联动？面对复杂的数据层次有什么好办法呢？今天介绍一下多个饼图和嵌套环形图，可以帮你拓展思路。 多个饼图、嵌套环形图——不占空间的一表多图 若通过联动将多个饼图联系起来虽然也能达到将多张图表融入一张图表中，但却会占
JS-ECharts-前端图表 多层级联合饼图、柱状堆叠图、柱/线组合图、趋势图、自定义中线、平均线、气泡备注点
君琴 的博客
09-23 3236
JavaScript编码，使用ECharts绘制前端图表：多层级联合饼图、柱状堆叠图、柱/线组合图、趋势图、自定义中线、平均线、气泡备注点、自定义数据分类占比、批注内容等
chart.js饼图 php,javascript – 如何使用chart.js脚本绘制多个饼图
weixin_28872283的博客
04-01 212
如果我理解正确,逻辑是创建一个在接受的画布上绘制图表的函数.这样,你可以在你想要的每个画布上调用该函数.例如：draw(document.getElementById("canvas"));draw(document.getElementById("canvas2"));请参阅以下代码：var allData =[[{value: 300,color:"#F7464A",highlight: "#...
使用D3.js绘制多维数据可视化图表
D3.js（Data-Driven Documents）是一个基于JavaScript的数据可视化库，通过使用HTML、SVG和CSS将数据进行可视化呈现。D3.js充分利用现代Web技术，提供丰富的API和强大的功能，使得开发者能够灵活地创建各种交互式、...
D3.js实现雷达图的方法详解
10-21
D3.js（Data-Driven Documents）是一个JavaScript库，它允许开发者利用数据来操作DOM（文档对象模型），从而创建交互式的数据可视化效果。D3.js主要依赖HTML、SVG（可缩放矢量图形）和CSS来生成图表，因此在使用D3....
d3-978-1-7821-6216-2:使用 D3.js Cookbook 进行数据可视化
05-30
《使用 D3.js Cookbook 进行数据可视化》是一本针对 JavaScript 开发者，特别是对数据可视化感兴趣的读者的专业指南。D3.js（Data-Driven Documents）是Mike Bostock开发的一个强大的JavaScript库，它允许开发者利用...
使用D3.js创建引人入胜的可视化效果
D3.js是一个用于操作文档基于数据的JavaScript库。它可以帮助开发者使用HTML、SVG和CSS来展示数据，并且能够实现数据与图形之间的绑定。D3代表数据驱动文档（Data-Driven Documents），它强调数据驱动的转化和操作...
SVG|JS实现饼图
06-06
使用SVG弄的一个饼图PIE，只在于学习，可以参考下！
JS饼状图效果
11-20
插件描述：基于highcharts.js实现的饼状图效果，报表. 参考示例：http://www.jq22.com/jquery-info4506
highChartsjs饼状图
美丽的泡沫
11-25 1051
饼状图完美展示
D3学习篇-画饼图
ly2230976595的博客
01-13 2203
D3之画饼图的步骤
vue项目基于D3js的3D饼图实现
最新发布
xzy__007的博客
02-02 603
【代码】vue项目基于D3js的3D饼图实现。
D3.js v5.0 3D饼图
m0_37777005的博客
05-30 7815
3D的饼图主要可看成 2D饼图（最上层）+外曲面组成。 3D的环形饼图主要可看成 2D饼图（最上层）+外曲面+内曲面组成。 所以渲染也分为了几部分。 #render.js import * as d3 from 'd3'; import { draw, transition } from './renderUtil'; const salesData = [ { label: 'Basi...
vue项目基于D3js的3D饼图实现（五）
qq_40011214的博客
05-09 1112
纵向普通图例的实现，效果图如下。
数据可视化：基本图表
闲云孤鹤
11-29 3406
本文转载至：http://www.ruanyifeng.com/blog/2014/11/basic-charts.html 作者： 阮一峰 "数据可视化"可以帮助用户理解数据，一直是热门方向。 图表是"数据可视化"的常用手段，其中又以基本图表----柱状图、折线图、饼图等等----最为常用。 用户非常熟悉这些图表，但如果被问道，它们的特点是什么，最适用怎样
echarts使用D3.js实现3D饼图
03-31
抱歉，我是一个语言模型AI，我不能为您提供关于echarts使用D3.js实现3D饼图的指导。但是，我可以为您提供有关D3.js和echarts的基本知识，以便您可以更好地理解相关主题。 D3.js是一个数据可视化库，它使用HTML、CSS和SVG等Web技术来创建丰富的交互式数据可视化。D3.js可以帮助您从数据中生成各种类型的图表，例如饼图、柱状图、散点图等。 echarts是另一个流行的数据可视化库，它是基于JavaScript的，旨在为用户提供一个简单易用的方式来创建各种类型的图表。echarts可以帮助您创建柱状图、折线图、散点图、地图等等。 要使用D3.js实现3D饼图，您需要了解一些3D图形编程知识和D3.js的基本用法。您可以从D3.js官方网站获取更多信息和教程。 同样地，要使用echarts创建3D饼图，您需要了解一些基本的echarts用法以及如何使用其内置的3D图形功能。您可以从echarts官方网站获取更多信息和教程。 希望这些信息可以对您有所帮助。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值