initPieChart: function (el, data) {
// var data = [2, 4, 8, 10];
// 得到容器的尺寸
var width = el.width(),
height = el.height();
var radius = Math.min(width, height) / 3;
// 清空容器
d3.select(el[0])
.select("svg")
.remove();
// 容器插入svg
var svg = d3.select(el[0])
.append("svg")
.attr("width", width)
.attr("height", height)
.append("g")
// 创建内部容器放置图表,并且移动到中间
g = svg.append("g").attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");
// 根据数据key从颜色序列取得固定颜色
var color = d3
.scaleOrdinal()
.domain(
data.map(function (d) {
return d.lx;
})
)
.range([
'#4aff14', '#f52c56', '#41a3f4', '#f2c92f'
]);
// d3 v4 api指定使用数据的哪个字段生成pie
var pie = d3.pie()
.value(function (d) { return d.overps });
// pie部分的arc,得到一个函数,用来生成pie每个部分的path路径
var arc = d3.arc()
.innerRadius(0)
.outerRadius(radius);
var innerArc = d3.arc()
.innerRadius(0)
.outerRadius(radius * 2);
var outerArc = d3.arc()
.innerRadius(0)
.outerRadius(radius * 2.5);
//pie容器
var arcs = g.selectAll("arc")
.data(pie(data))
.enter()
.append("g")
.attr("class", "arc")
//生成pie每个部分的path,并且赋值path的路径
arcs.append("path")
.attr("fill", function (d, i) {
return color(i);
})
.attr("d", arc);
var key = function (d) {
return d.data.lx;
};
var polyline = g.selectAll("polyline")
.data(pie(data), key)
// 生成指示折现
polyline.enter()
.append("polyline")
.style("stroke", '#fff')
.style('fill', 'none')
.style("stroke-width", '2px')
.attr("points", function (d) {
// var pos = outerArc.centroid(d);
// pos[0] = radius * 0.5 * (midAngle(d) < Math.PI ? 1 : -1);
var r1 = arc.centroid(d)
var result = [innerArc.centroid(d), outerArc.centroid(d)]
console.log(result)
return result
});
function midAngle (d) {
return d.startAngle + (d.endAngle - d.startAngle) / 2;
}
var text = g.selectAll("text")
.data(pie(data), key);
text.enter()
.append("text")
.attr("dy", ".35em")
.attr('fill', '#fff')
.attr('text-anchor', function (d) {
return midAngle(d) < Math.PI ? "start" : "end";
})
.text(function (d) {
return d.data.lx;
})
.attr('transform', function (d) {
var pos = outerArc.centroid(d);
return "translate(" + pos + ")";
})
}
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。