D3js-三種圖表tooltip提示框總結介紹

阿新 • • 發佈：2019-01-18

參考資料：

效果圖：

原始碼：

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
    
    <title>d3-提示框tooltip</title>
    
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">    
	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
	<meta http-equiv="description" content="This is my page">
	<!--
	<link rel="stylesheet" type="text/css" href="styles.css">
	-->
  <script type="text/javascript" src="js/d3/d3.js"></script>
  <script type="text/javascript" src="js/d3/d3.min.js"></script>
  
  <!--position:absolute;設定絕對路徑很重要，要是沒有設定的話，
  	   提示框的div就無法根據滑鼠移到的位置而在不同位置顯示(沒有設定只會在圖片的下方顯示) -->
  <style type="text/css">
  		.tooltip{
  			font-family:simsun;
  			font-size:16px;
  			width:120;
  			height:auto;
  			position:absolute; 
  			text-align:center;
  			border-style:solid;
  			border-width:1px;
  			background-color:white;
  			border-radius:5px;	
  		}

  </style>
  
  
  </head>
  
  <body>
    <script type="text/javascript">
    	var width = 600;
    	var height = 600;
    
    	//設定 餅圖的內半徑 和外半徑（如果 內半徑不為0的話，顯示的是圓環圖）
    	var outerRadius = width/3;
    	var innerRadius = 0;
    	
    	var dataset =[["小米",200],["華為",400],["聯想",300],["魅族",100],["WP",230]];
    	//新建一個svg圖片
    	var svg = d3.select("body").append("svg")
					.attr("width",width)
					.attr("height",height);
		//轉換資料	    	
    	var pie = d3.layout.pie()
    						.value(function(d){
    						 return d[1];
    						 });
    	var piedata =pie(dataset);
    	
    	//建立弧生成器
    	var arc = d3.svg.arc()
    					.outerRadius(outerRadius)
    					.innerRadius(innerRadius);
    						
    	//顏色（20種顏色可自動選擇）
    	var color = d3.scale.category20();
    	
    	//新增對應數目的弧
    	var arcs=svg.selectAll("g")
    			.data(piedata)
    			.enter()
    			.append("g")
    			//圓心座標
    			.attr("transform","translate("+outerRadius+","+outerRadius+")");
    	
    	//通過路徑繪製弧
    	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,i)
    		{
    			//centroid(d)是取弧的重心
    			var x = arc.centroid(d)[0]*1.5;
    			var y = arc.centroid(d)[1]*1.5;
    			
    			//返回文字顯示的座標
    			return "translate("+x+","+y+")";
    		})
    		.attr("text-anchor","middle")
    		.style("font-size",16)
    		.text(function(d,i)
    		{
    			//求所佔百分比
    			var percent =Number(d.value)/d3.sum(dataset,function(d){return d[1];})*100;
    			
    			//toFixed(num) 四捨五入為規定小數的位數，num為小數位數
    			return percent.toFixed(1)+"%";
    			
    		});
    	
    	
    	//---------------------------------1.d3中的title標籤提示框
    		arcs.append("title")
    		.text(function(d)
    		{
    			return d.data[0]+"銷售量是"+d.data[1]+"百萬臺";
    		});
    		
    	
    	//------------------------------------2.div提示框,通過設定透明度（opacity屬性）實現 顯示和隱藏	
    		//新增提示框的div
    		var tooltip = d3.select("body").append("div")
    					.attr("class","tooltip") //用於css設定類樣式
    					.attr("opacity",0.0);
    		
    		//響應事件
    			//-滑鼠移入事件
    	arcs.on("mouseover",function(d)
    		{	
    			//設定tooltip文字
    			tooltip.html(d.data[0]+"銷售額為"+"<br/>"+d.data[1]+"百萬臺")
    			//設定tooltip的位置(left,top 相對於頁面的距離) 
    					.style("left",(d3.event.pageX)+"px")
    					.style("top",(d3.event.pageY+20)+"px")
    					.style("opacity",1.0);
    		})
    		//--滑鼠移出事件
    		.on("mouseout",function(d)
    		{
    			tooltip.style("opacity",0.0);
    		}); 
    		
    		//-----------------------------------3.svg中的text標籤提示框
    		
    	 	arcs.on("mouseover",function(d)
    		{
    			
    			//var x = parseFloat(d3.select(this).attr("x")); 這個我的無法獲得他們的值
    			//var y =parseFloat(d3.select(this).attr("y")+20);
    			
    			var x =d3.event.pageX;
    			var y =d3.event.pageY+30;
				//新增標籤
    			svg.append("text")
    				.attr("id","tooltip")    				
    				.attr("x",x)
    				.attr("y",y) 
    				.attr("text-anchor","middle")  
					.attr("font-family","sans-setif")  
					.attr("font-size","11px")  
					.attr("font-weight","bold")  
					.attr("fill","black")  
					//文字內容
    				.text("銷售量為"+d.value); 							
    		
    		})
    		//滑鼠移出時通過ID移除標籤
    	 	.on("mouseout",function(d)
    		{
    			d3.select("#tooltip").remove();
    		});  
    		
    </script>
    
  </body>
</html>

以上就是三種圖表互動的方法。

D3js-三種圖表tooltip提示框總結介紹

參考資料：效果圖：原始碼： <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <% String path = request.getContextPa

Echarts3.0使用中遇到的問題總結——tooltip提示框大小樣式問題

tooltip樣式大小不符合預期在使用Echart的時候，使用一個bar圖時，單獨寫demo的時候tooltip提示框的樣式沒有問題：樣式、大小都是內建的符合要求。但是把圖表放到專案中時就出現了，提示框大小過大的問題：官方的文件對

Tooltip(提示框)組件

() event easy 允許元素 eas log options troy <!DOCTYPE html> <html> <head> <title>jQuery Easy

javascript 三種彈出對話框

ont 出現進入 span 執行 confirm 輸入 str strong 第一種：alert()方法第二種：confirm()方法返回一個布爾值，根據返回的值可以執行相應操作。第三種： prompt()方法返回輸入的消息，或者其默認值提示框經常用於提示用戶在進

Extjs的幾種簡單的提示框

col 輸入框 highlight 用戶名 9.png src mage 取消 cti Extjs的幾種簡單的提示框轉自https://blog.csdn.net/qq_28364999/article/details/53483884 一、Ext.MessageBox.a

echarts圖表tooltip浮動框顯示單位——散點圖

專案中要求在圖表的浮動提示窗上顯示相對應的單位如圖：方法有二，如下：方法1：利用自定義提示框進行拼接：但是這樣的話根據後臺返回的資料格式的不同進行處理，在tooltip的formatter中進行拼接即可，注意這樣的話要考慮的情況比較多。方法2（如果和後臺商量好可以

echarts中tooltip提示框位置控制

option = { title: { text: '折線圖堆疊' }, tooltip: { trigger: 'axis', position: function(point, params, dom, rect,

三種迴圈的流程圖畫法總結（轉載）

三種迴圈的流程圖畫法總結 C語言程式設計中常用的三種迴圈為for（；；），while 和 do-while。 1.&nbs

easyui Tooltip 提示框

通過 $.fn.tooltip.defaults 重寫預設的 defaults。當用戶移動滑鼠指標在某個元素上時，出現提示資訊視窗用來顯示額外資訊。提示內容可以包含任何來自頁面的或者通過 ajax 生成的 html 元素。用法建立提示框（Tooltip） 1、從標記建立提

CSS3-tooltip提示框動畫提示框

程式碼複製到本地可以直接看到效果效果在這： <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></ti

微信小程式開發（三）- 顯示 loading 提示框

首先看一張圖片，就是要做成的效果。當我們點選查詢時，就會有一個請選擇地點的彈出框。這個狀態我們只能去看微信開發文件了。這個在API-介面-互動反饋-wx.hideLoading() 這

spring IOC中三種依賴注入方式經典總結

首先：第一個問題，參與者都有誰？1）物件2）IOC/DI容器3）某個物件的外部資源第二問題：依賴，誰依賴誰？為什麼需要依賴？依賴嘛，很好理解的，物件依賴於IOC/DI容器，至於為什麼要依賴呢？物件需要IOC/DI容器來提供物件需要的外部資源。第三個問題：注入，誰注入誰？又注入了什麼呢？顯而易見是IOC/DI容

三種迴圈的流程圖畫法總結

C語言程式設計中常用的三種迴圈為for（；；），while 和 do-while。 1. for迴圈 for迴圈形式： for（表示式1；表示式2；表示式3）流程圖：圖1 for迴圈流程圖 2. while迴圈 while迴圈形式： while（判斷條件） {

Oracle 三種表關聯方式的總結, 使用hint來驗證

最近認真參加Dataguru的Oracle培訓，正經學了一些東西，有時間就整理一下放到這裡，以便以後學習。今天總結一下三種表關聯方式的適用場景。 1. Nested Loop 原理：從外部表中拿資料，去內部表中去比對適用場景： 1）關聯中有一個表比較小 2）被關聯表的關

Echarts學習之十八：tooltip提示框

tooltip ={ //提示框元件 trigger: 'item',

Tooltip(提示框)元件

<!DOCTYPE html> <html> <head> <title>jQuery Easy UI</title> <meta charset="UTF-8" /> <script type=

C++的陣列、結構體、指標三種複合型別知識點小總結

陣列、結構體、指標是C++的3種複合型別。陣列可以在一個數據物件中儲存多個不同型別的值，通過使用索引或下標，可以訪問陣列中的各個元素。結構體可以將多個不同型別的值儲存在同一個資料物件中，可以使用成員關

electron 中使用 el-tooltip 提示框無效的問題

.electron-vue/webpack.renderer.config.js 21 行左右，將 element-ui 加入白名單let whiteListedModules = ['vue', 'element-ui']https://github.com/Simulat

Echarts的tooltip提示框中新增小點

Echarts的tooltip提示框當在左側會有一個提示的實心圓，當在tooltip中使用formatter之後，需要手動加上實心圓，，程式碼如下： <span style="display:inline-block;margin-right:5px;border-r

收集bootstrap的幾個常用用法---tooltip提示框

看到的原網址：http://www.cnblogs.com/dk1988/p/3670561.html 詳細的bootstrap網址可以去這看： http://www.runoob.com/bootstrap/bootstrap-tutorial.html boots

D3js-三種圖表tooltip提示框總結介紹

相關推薦