学习文献：http://pkuwwt.github.io/d3-tutorial-cn/adding-elements.html (基础教学)
https://juejin.im/post/5a81a8946fb9a06334266f05 (讲解插值)
https://github.com/pshrmn/notes/blob/master/d3/interpolators.md (解释插值)
今天要学习总结下d3画饼图，先看效果图
饼图.gif
上面是饼图带点击动画的，然后中间的数字可以变化。这里面主要用到d3来实现效果。后面我会贴出我全部的代码
思路流程
创建SVG--->添加g标签元素--->数据转换得到我们需要的数据--->添加path开启动画和画圆--->点击圆让其变大--->数字慢慢增长
创建SVG
var svg = d3.select('#d3Circle')
.append("svg")
.attr("width", sellCircleSVGWid)
.attr("height", sellCircleSVGhei);
.select表示要选择的函数，append创建SVG，attr用来设置属性值，我这里设置了宽度和高度。我们创建的SVG是一个矢量图的格式可无限放大而不失真。
添加g标签
var arcs = svg.selectAll("g")
.data(piedata)//设置数据集，piedata元素集合
.enter()
.append("g")//添加g元素
.attr("transform", "translate(" + sellCircleSVGWid / 2 + "," + sellCircleSVGhei / 2 + ")");
我通过SVG再创建一个g标签，并且让它移动到圆的中心位置
selectAll表示选中所有的g标签元素，但是我们在此之前并没有创建g标签元素，所以通过selectAll会返回一个空的集合给我。data用于设置数据源，piedata集合里面有多少数据，就会创建多少个g标签元素给我。enter()表示创建，append表示添加。
注意！！! piedata 必须是集合参数(我自己总结出来的，我试过几次了，不是集合就不会画图出来)
我们最好是把g标签创建出来，因为g是用来组合对象的容器。添加到g元素上的变换会应用到其所有的子元素上。添加到g元素的属性会被其所有的子元素继承。此外，g元素也可以用来定义复杂的对象。
数据转换得到我们需要的数据
//创建圆弧生成器
var arcPath = d3.svg.arc()
.innerRadius(innerRaidus)
.outerRadius(outerRadius);
//创建圆弧生成器
var arcPath2 = d3.svg.arc()
.innerRadius(innerRaidus)
.outerRadius(outerRadius + 5);
var color = ['#c56b4f', '#e8b63e', '#435fd8'];
var ptDetail = ["456", "123", "256"];//数据源
var totalSales = "835";
//这里数据过滤，拿到需要的数据
var pie = d3.layout.pie().value(function (d) {
return d - 0;//将字符串转为数字
});
var dataset = [];//数据集合
for (var k in ptDetail) {
dataset.push(ptDetail[k] / totalSales);//算出占用量
}
dataset.sort(function (a, b) {//从大到小排序
return a < b ? 1 : -1
});
var piedata = pie(dataset);//拿到需要的数据
//先定义位置
var sum = 0;
piedata.forEach(function (d, i) {//定义自己的颜色，执行实时间等
d.color = color[i];
d.position = i;
d.duration = 2000 * (d.data / d3.sum(dataset));//动画时长2秒，计算每一个弧形所用动画时间
d.delaytime = sum;
sum += d.duration;
});
var arcPath = d3.svg.arc().innerRadius(innerRaidus).outerRadius(outerRadius); 创建一个弧生成器，我们把数据传递给它，像这样arcPath(data)，它就会返回一堆路径数据给你，这堆数据用于path上面画圆。
d3.layout.pie().value 主要用于数据过滤，然后内部计算得到开始角度，结束角度
piedata数据转换后的值.png
这里面的data 是原始的数据，startAngle是开始弧度，endAngle是结束弧度。dataset是未进行过滤的数据源
添加path开启动画和画圆
arcs.append("path")
.transition()
.delay(function (d, i) {
return d.delaytime;
})
.duration(function (d, i) {
return d.duration;
})
.attrTween("d", function (d, j) {//过度器
var i = d3.interpolate(d.startAngle, d.endAngle);
return function (t) {
d.endAngle = i(t);
return arcPath(d);
}
})
.attr("stroke-width", "2px")
.attr("fill", function (d, i) {
return d.color;
});
transition()用于开启动画的标志，delay()多少时间后开始执行，duration()多少时间内完成，attrTween()过渡器，这个比较难立即了吧，举一个简单的例子说明
//下面我用书上的例子来展示
var svg = d3.select('#d3Circle')
.append("svg")
.attr("width", 200)
.attr("height", 180);
//定义SVG的宽高
var svg = d3.select('#d3Circle')
.append("svg")
.attr("width", sellCircleSVGWid)
.attr("height", sellCircleSVGhei);
var rect = svg.append("rect")
.attr("fill", "steelblue")
.attr("x", 10)
.attr("y", 10)
.attr("width", 100)
.attr("height", 30);
var rectTran = rect.transition()
.duration(2000)
.attrTween("width", function (d, i, a) {
return function (t) {
return Number(a) + t * 300;
}
});
attrTween动画.gif
所以我们可以理解为，数字从0到1，慢慢变化的过度。继续上面的讲解
var i = d3.interpolate(d.startAngle, d.endAngle);在d3里面，interpolate解释为插值器的意思，我上面贴的链接也有对这个进行解释，然后我对它的理解如下
interpolate的理解.png
t的取值为[0,1]，我们i就是作为一个函数了，如果我们duration时间很长那么通过i(t)得到的数据也会很多，所以我们过度动画就从0读到endAngle变化了。arcPath(d)拿到数据函数将其转换为路径值，然后赋值给d参数。
点击圆让其变大
var isClick = false
arcs.on("click", function (d) {//点击
d3.select(this).select("path").transition().attr("d", function (d) {
if (!isClick) {//放大效果
isClick = true;
return arcPath2(d);
} else {//还原
isClick = false;
return arcPath(d);
}
});
});
由于我上面写了2个arcPath，一个用于点击后放大的效果的。
数字慢慢增长
function CusnumDd(el, param) {
var sum = 0;
var time = setInterval(function () {
sum += 1;
el.innerHTML = sum;
if (param <= sum) {
clearInterval(time);
el.innerHTML = (param);
}
}, 100)
}
全部代码
<script type="text/javascript">
$(function () {
var sellCircleSVGWid = 200;//宽
var sellCircleSVGhei = 180;//高
var innerRaidus = 60;
var outerRadius = 80;
//定义SVG的宽高
var svg = d3.select('#d3Circle')
.append("svg")
.attr("width", sellCircleSVGWid)
.attr("height", sellCircleSVGhei);
/* var rect = svg.append("rect")
.attr("fill", "steelblue")
.attr("x", 10)
.attr("y", 10)
.attr("width", 100)
.attr("height", 30);
var rectTran = rect.transition()
.duration(2000)
.attrTween("width", function (d, i, a) {
return function (t) {
return Number(a) + t * 300;
}
});*/
//画圆形图开始
var arcPath = d3.svg.arc()
.innerRadius(innerRaidus)
.outerRadius(outerRadius);
//画圆形图开始
var arcPath2 = d3.svg.arc()
.innerRadius(innerRaidus)
.outerRadius(outerRadius + 5);
var color = ['#c56b4f', '#e8b63e', '#435fd8'];
var ptDetail = ["456", "123", "256"];
var totalSales = "835";
var pie = d3.layout.pie().value(function (d) {
return d - 0;
});
var dataset = [];//数据集合
for (var k in ptDetail) {
dataset.push(ptDetail[k] / totalSales);
}
dataset.sort(function (a, b) {
return a < b ? 1 : -1
});//从大到小排序
var piedata = pie(dataset);//元素集合
//先定义位置
var sum = 0;
piedata.forEach(function (d, i) {
d.color = color[i];
d.position = i;
d.duration = 2000 * (d.data / d3.sum(dataset));//动画时长2秒，计算每一个弧形所用动画时间
d.delaytime = sum;
sum += d.duration;
});
var arcs = svg.selectAll("g")
.data(piedata)
.enter()
.append("g")
.attr("transform", "translate(" + sellCircleSVGWid / 2 + "," + sellCircleSVGhei / 2 + ")");
arcs.append("path")
.transition()
.delay(function (d, i) {
return d.delaytime;
})
.duration(function (d, i) {
return d.duration;
})
.attrTween("d", function (d, j) {
var i = d3.interpolate(d.startAngle, d.endAngle);
return function (t) {
d.endAngle = i(t);
return arcPath(d);
}
})
.attr("stroke-width", "2px")
.attr("fill", function (d, i) {
return d.color;
});
var isClick = false
arcs.on("click", function (d) {//点击
d3.select(this).select("path").transition().attr("d", function (d) {
if (!isClick) {
isClick = true;
return arcPath2(d);
} else {
isClick = false;
return arcPath(d);
}
});
});
var s = document.getElementById("number");
del_ff(s); //清理空格
var el = s.firstChild; //获得s的第一个子节点
CusnumDd(el, 8);
var a = document.getElementById("dom");
del_ff(a);
console.log('获取a的全部子节点:')
console.log(a.childNodes);//获取a的全部子节点；
console.log('获取a的父节点:')
console.log(a.parentNode); //获取a的父节点；
console.log('获取a的下一个兄弟节点:')
console.log(a.nextSibling);//获取a的下一个兄弟节点
console.log('获取a的上一个兄弟节点:')
console.log(a.previousSibling);//获取a的上一个兄弟节点
console.log('获取a的第一个子节点:')
console.log(a.firstChild);//获取a的第一个子节点
console.log('获取a的最后一个子节点:')
console.log(a.lastChild);//获取a的最后一个子节点*/
});
function del_ff(elem) {
var elem_child = elem.childNodes;
for (var i = 0; i < elem_child.length;) {
if (elem_child[i].nodeName == "#text" && !/\s/.test(elem_child.nodeValue)) {
elem.removeChild(elem_child[i])
}
else {
i++;
}
}
}
/**
* 功能: 数字滚动显示
* @param el 选择对象
* @param param 数字参数
*/
function CusnumDd(el, param) {
var sum = 0;
var time = setInterval(function () {
sum += 1;
el.innerHTML = sum;
if (param <= sum) {
clearInterval(time);
el.innerHTML = (param);
}
}, 100)
}
</script>
html
<div id="container">
<div class="circle" id="d3Circle">
<div id="number">
<span></span>
</div>
</div>
<div id="dom">
<div></div>
<div></div>
<div></div>
</div>
</div>
css
<style type="text/css">
body, html, #allmap {
width: 100%;
height: 100%;
overflow: hidden;
margin: 0;
font-family: "微软雅黑";
}
#container {
width: 100%;
height: 500px;
display: flex;
display: -webkit-flex;
flex-direction: column;
align-items: center;
}
.circle {
width: 100%;
height: 200px;
display: flex;
display: -webkit-flex;
flex-direction: column;
align-items: center;
justify-content: center;
position: relative;
}
#number {
color: black;
width: 60px;
height: 60px;
line-height: 60px;
text-align: center;
position: absolute;
}
</style>
