D3.js给饼状图添加提示框

最新推荐文章于 2024-03-17 09:48:51 发布
最新推荐文章于 2024-03-17 09:48:51 发布
阅读量7.4k 收藏 12
点赞数
分类专栏： 数据可视化D3.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u011699990/article/details/52831091
版权

添加交互效果 当鼠标移动到某一块时 显示该块表示的产商的出货量

<html>  
  <head>  
        <meta charset="utf-8">  
        <title>饼状图</title>  
  </head> 

<style>

.tooltip{
	position: absolute;
	width: 120px;
	height: auto;
	font-family: simsun;
	font-size: 14px;
	text-align: center;
	color: white;
	border-width: 2px solid black;
	background-color: black;
	border-radius: 5px;
}

.tooltip:after{ 
	content: '';
	position: absolute;
	bottom: 100%;
	left: 20%;
	margin-left: -8px;
	width: 0;
	height: 0;
	border-bottom: 12px solid black;
	border-right: 12px solid transparent;
	border-left: 12px solid transparent;
}

</style>

<body>
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>  
<script>

var width=600;
var height=600;
var svg=d3.select("body")
			.append("svg")
			.attr("width",width)
			.attr("height",height);

var dataset=[ ["小米",60.8] , ["三星",58.4] , ["联想",47.3] , ["苹果",46.6] ,
						["华为",41.3] , ["酷派",40.1] , ["其他",111.5] ];

//转换数据
var pie=d3.layout.pie() //创建饼状图
			.value(function(d){
				return d[1];
			});//值访问器
//dataset为转换前的数据 piedata为转换后的数据
var piedata=pie(dataset);

//绘制
var outerRadius=width/3;
var innerRadius=0;//内半径和外半径

//创建弧生成器
var arc=d3.svg.arc()
			.innerRadius(innerRadius)
			.outerRadius(outerRadius);
var color=d3.scale.category20();
//添加对应数目的弧组
var arcs=svg.selectAll("g")
			.data(piedata)
			.enter()
			.append("g")
			.attr("transform","translate("+(width/2)+","+(height/2)+")");
//添加弧的路径元素
arcs.append("path")
	.attr("fill",function(d,i){
		return color(i);
	})
	.attr("d",function(d){
		return arc(d);//使用弧生成器获取路径
	});
//添加弧内的文字
arcs.append("text")
	.attr("transform",function(d){
		var x=arc.centroid(d)[0]*1.4;//文字的x坐标
		var y=arc.centroid(d)[1]*1.4;
		return "translate("+x+","+y+")";
	})
	.attr("text-anchor","middle")
	.text(function(d){
		//计算市场份额的百分比
		var percent=Number(d.value)/d3.sum(dataset,function(d){
			return d[1];
		})*100;
		//保留一位小数点 末尾加一个百分号返回
		return percent.toFixed(1)+"%";
	});
//添加连接弧外文字的直线元素
arcs.append("line")
	.attr("stroke","black")
	.attr("x1",function(d){
		return arc.centroid(d)[0]*2;
	})
	.attr("y1",function(d){
		return arc.centroid(d)[1]*2;
	})
	.attr("x2",function(d){
		return arc.centroid(d)[0]*2.2;
	})
	.attr("y2",function(d){
		return arc.centroid(d)[1]*2.2;
	});

var fontsize=14;
arcs.append("line")
	.style("stroke","black")
	.each(function(d){
		d.textLine={x1:0,y1:0,x2:0,y2:0};
	})
	.attr("x1",function(d){
		d.textLine.x1=arc.centroid(d)[0]*2.2;
		return d.textLine.x1;
	})
	.attr("y1",function(d){
		d.textLine.y1=arc.centroid(d)[1]*2.2;
		return d.textLine.y1;
	})
	.attr("x2",function(d){
		// console.log("d.data[0]:  "+d.data[0]);//产商名
		var strLen=getPixelLength(d.data[0],fontsize)*1.5;
		var bx=arc.centroid(d)[0]*2.2;
		d.textLine.x2=bx>=0?bx+strLen:bx-strLen;
		return d.textLine.x2;
	})
	.attr("y2",function(d){
		d.textLine.y2=arc.centroid(d)[1]*2.2;
		return d.textLine.y2;
	});



//添加弧外的文字元素
// arcs.append("text")
// 	.attr("transform",function(d){
// 		var x=arc.centroid(d)[0]*2.5;
// 		var y=arc.centroid(d)[1]*2.5;
// 		return "translate("+x+","+y+")";
// 	})
// 	.attr("text-anchor","middle")
// 	.text(function(d){
// 		return d.data[0];
// 	});
arcs.append("text")
	.attr("transform",function(d){
		var x=0;
		var y=0;
		x=(d.textLine.x1+d.textLine.x2)/2;
		y=d.textLine.y1;
		y=y>0?y+fontsize*1.1:y-fontsize*0.4;
		return "translate("+x+","+y+")";
	})
	.style("text-anchor","middle")
	.style("font-size",fontsize)
	.text(function(d){
		return d.data[0];
	});

//添加一个提示框
var tooltip=d3.select("body")
				.append("div")
				.attr("class","tooltip")
				.style("opacity",0.0);

arcs.on("mouseover",function(d,i){
				/*
				鼠标移入时，
				（1）通过 selection.html() 来更改提示框的文字
				（2）通过更改样式 left 和 top 来设定提示框的位置
				（3）设定提示框的透明度为1.0（完全不透明）
				*/
	console.log(d.data[0]+"的出货量为"+"<br />"+d.data[1]+" 百万台")
	tooltip.html(d.data[0]+"的出货量为"+"<br />"+d.data[1]+" 百万台")
		.style("left",(d3.event.pageX)+"px")
		.style("top",(d3.event.pageY+20)+"px")
		.style("opacity",1.0);
	tooltip.style("box-shadow","10px 0px 0px"+color(i));//在提示框后添加阴影
	})
	.on("mousemove",function(d){
		/* 鼠标移动时，更改样式 left 和 top 来改变提示框的位置 */
		tooltip.style("left",(d3.event.pageX)+"px")
				.style("top",(d3.event.pageY+20)+"px");
	})
	.on("mouseout",function(d){
		//鼠标移除 透明度设为0
		tooltip.style("opacity",0.0);
	})

	function getPixelLength(str,fontsize){
		var curLen=0;
		for(var i=0;i<str.length;i++){
			var code=str.charCodeAt(i);
			var pixelLen=code>255?fontsize:fontsize/2;
			curLen+=pixelLen;
		}
		return curLen;
	}
</script>

</body>

</html>


效果图




   

理想主义文艺青年
关注
  • 0
    点赞
  • 踩
  • 12
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
d3-tooltip:简单、美观的数据驱动工具提示
07-24
D3 工具提示 有关交互式示例，请参阅！ 请参阅用法示例 截屏 强调 动态调整大小 大量自定义选项 用法 将tooltip.js文件包含到您的应用程序中 < script src =" tooltip.js " > </ script > 在 d3 视觉对象中初始化工具提示 var tooltip = d3 . componentsTooltip ( ) . container ( '.svg-element' ) . content ( [ { left : "default id" , right : "{id}" } , { left : "default value" , right : "
D3js-三种图表tooltip提示框总结介绍
weixin_33901843的博客
06-16 1296
参考资料： 1.交互图表之提示条 2.交互式之提示框 效果图： 源码： <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <% String path = request.getContextPath(); String basePath ...
D3js（六）：支持css的tooltips
weixin_40759186的博客
07-11 381
文章目录实现如下效果，不是简单的文本，而是有样式的文本1、配置一个tooltips的div块：2、配置tooltips div块的css：3、配置节点上的事件处理： 实现如下效果，不是简单的文本，而是有样式的文本 1、配置一个tooltips的div块： var tooltip = d3.select("#graph").append("div") ...
vue引入D3绘制流程图
qq_37642495的博客
12-29 3797
npm install d3 npm install dagre-d3 这样项目里面就可直接引入使用了 如过项目里面使用比较多 可以在main.js里面全局引入 不多的话就在vue文件里面引入即可 import dagreD3 from 'dagre-d3' import * as d3 from 'd3' 需要注释我都标注在代码里面了 // 设置节点和连线 renderGagre() { let self = this this.tooltip = this.
如何使用 d3-tip 为基于 d3.js 的可视化创建工具提示？
allway2的博客
11-04 1003
要为基于 d3.jsd3.js（数据驱动文档）的可视化创建工具提示，解决方案是使用d3-tip。 如何使用 d3-tip 为基于 d3.js 的可视化创建工具提示？ 重现上述示例的脚本： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Example d3-tip with circle</title>.
vue+d3给svg上的dom元素添加toolTip
Fauna的博客
06-26 2994
目录1. 需求描述2. 项目架构3. 实现方案4. 根据项目需求进行一些改变参考 1. 需求描述 使用d3绘制了一张svg图，现在需要对图上的元素添加浮动提示。 项目提示要求： 只针对某些元素添加浮动提示 可能有很多条提示信息，需要将他们成列表状显示 国际化时需要动态调整tip的宽度 2. 项目架构 这个前端项目使用的vuejs；绘制svg图使用的d3(emmmmm 可能大材小用，因为实际上需...
使用D3和FileReader在线生成树形图
justforuse的博客
04-29 4525
在线示例：http://justforuse.github.io/d3/generate-tree/index.html其中绘制树形图部分代码主要来自：http://codepen.io/augbog/pen/LEXZKK?editors=1010有个道友问我该如何在线生成树形图，我当时只是甩给他个d3js，但是他只想看效果让我帮忙做一个。。要实现上传文件绘制树形图，我原以为需要后台返回数据，但其实
d3.js绘制树形图
weixin_45946494的博客
10-23 1600
最新版（v7）d3.js绘制树形图，网上搜到的大多使用低版本的绘制，只好自己摸索一下了！
推荐一款实用的D3.js提示插件-d3-tip
最新发布
gitblog_00038的博客
03-17 282
推荐一款实用的D3.js提示插件-d3-tip 如果你正在使用D3.js进行数据可视化，并且希望为你的图表添加友好的提示信息，那么d3-tip可能是一个值得你尝试的选择。 项目简介 d3-tip是一款轻量级的D3.js提示插件，它可以帮助你在鼠标悬停在图表元素上时显示相关的提示信息，让用户更好地理解和探索你的数据可视化作品。 功能特性 易于集成：d3-tip通过简单的API调用即可实现与D3.j...
D3.js实现饼状图的方法详解
10-21
相信大家都知道图表是数据图形化的表示，通过形象的图表来展示数据，比如条形图，折线图，饼图等。可视化图表可以帮助开发者更容易理解...现在就让我们大家一起来学习用D3.js来实现饼图的方法，有需要的可以参考借鉴。
D3.js-Tooltip:D3.js 的工具提示
06-03
#How 在 D3.js 中创建工具提示名称： Maria Cristina Di Termine类别： D3.js 框架 日期： 2015 年 5 月 工具提示是当鼠标悬停在视图的特定元素上时会出现的一条信息。 有些人用不同的名称来称呼它，例如“悬停框”、“信息提示”或“提示”，但可以肯定的是，它是显示信息的有用工具，也可以成为我们项目的时尚元素。 我想向您展示我如何在 D3.js 项目中制作工具提示。 首先，我创建了一个关于一个简单参数的通用条形图：巧克力。 我有两个值：牛奶的百分比（Y）和可可的百分比（X）。 在我的图表最后，我会得到 4 种不同口味的巧克力棒！ 我需要做的是使用名称指定哪种巧克力棒，例如“lightchoco”、“milkchoco”等。我将在我的工具提示中显示这些巧克力名称，可能还会使用额外的图片。 ##工具提示 现在我们有了条形图，我们可以创建工具提示。 为此
前端开源库-d3tooltip
08-30
前端开源库-d3tooltipd3 tooltip，一个高度可配置的d3工具提示
利用d3.js力导布局绘制资源拓扑图实例教程
01-19
emmm 这个看起来很像女神在遛一群舔狗… 啊不，是 d3.js 力导向图！ d3.js 力导向图 d3.js 是著名的数据可视化基础工具，他提供了基本的将数据映射至网页元素的能力，同时封装了大量实用的数据操作函数与图形算法。...
使用D3.js库绘制曲线图
04-11
【无需积分】 D3.js可视化库可以绘制曲线图。资源中xml文件包含了所有数据点，js文件调用D3库绘图，html文件展示绘图结果，css文件改变绘图样式。可以使用IE浏览器打开。
D3.js实现雷达图的方法详解
11-22
再简单介绍下D3.js，D3.js 是一个基于数据操作文档JavaScript库。D3帮助你给数据带来活力通过使用HTML、SVG和CSS。D3重视Web标准为你提供现代浏览器的全部功能，而不是给你一个专有的框架。结合强大的可视化组件和...
D3.js实现文本的换行详解
11-22
var svg = d3.select("body") .append("svg") .attr("width",width) .attr("height",height); 然后添加文字，用 text 元素，这样的代码我们很熟悉了： var text = svg.append("text") .attr("x
D3.js画折线图
热门推荐
youngkl博客
10-13 1万+
将中国和日本的GDP数据进行对比 通过折线图可以看出增长趋势 折线图的制作 .axis path, .axis line{ fill:none; stroke:black; shape-rendering:crispEdges; } --> var width=500; var height=500; var dataset=[ {
D3.js 动态散点图
youngkl博客
10-14 4559
之前画过一个静态的散点图 数据是固定的 点的呈现也是静态的  在这通过过渡的使用可以动态的显示点的变化       动态散点图 .axis path, .axis line{ fill:none; stroke:black; shape-rendering:crispEdges; } .btnWrap{ margin-left: 140px; margi
D3.js 添加图裂
05-26
如果您想在 D3.js 中添加图例，可以使用 D3.js 的图例模块。以下是一个基本示例： ```javascript var svg = d3.select("svg"); var data = [ {label: "Apples", value: 20}, {label: "Oranges", value: 10}, {...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值