参考网站：饼状图的拖拽
效果：鼠标可拖拽图形，双击图形可恢复到拖拽前的位置。
图片效果：
·1.原图：
2.拖拽后的图形：
完整源码：
<%@ 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/4;
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 drag = d3.behavior.drag()
//.origin(function(d){return d;})
.on("drag",dragmove);
//添加对应数目的弧
var arcs=svg.selectAll("g")
.data(piedata)
.enter()
.append("g")
//圆心坐标
.attr("transform","translate("+outerRadius+","+outerRadius+")")
//each 为每一个区域添加两个变量，用于保存偏移量，初始化为圆心坐标 （如果初始化为（0,0）的话拖拽一个图形他会首先会到svg的原点）
.each(function(d)
{
d.dx=outerRadius;
d.dy=outerRadius;
}
)
.call(drag);//调用拖拽函数
//设置偏移量的函数
function dragmove(d)
{
d.dx+= d3.event.dx;
d.dy+= d3.event.dy;
d3.select(this)
.attr("transform","translate("+d.dx+","+d.dy+")");
}
//dblclick双击图表后 恢复到拖拽前的位置,如果是click的话则当松开鼠标时所拖动的图形会自动恢复原来位置.
arcs.on("dblclick",function(d)
{ //把偏移量设为圆心
d.dx=outerRadius;
d.dy=outerRadius;
d3.select(this)
.attr("transform","translate("+d.dx+","+d.dy+")");
});
//---------------------------------------------------------------
//通过路径绘制弧
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]+"百万台";
});
</script>
</body>
</html>
时间： 2024-08-10 00:32:10