v4.x 版本-环状图
代码是基于vue 2.x版本项目中,代码注释部分为关键点解释都是基于d3-v4.x版本的。
demo实现效果图如下:
实现代码如下:(包含关键代码注释)
<template>
<div class="hello">
</div>
</template>
<script>
const d3 = require("d3");
// import * as d3 from "d3"
export default {
data() {
return {};
},
mounted: function() {
this.$nextTick(function() {
var data = [10, 1, 2, 3, 5, 8];
var width = 960,
height = 500;
var outerRadius = height / 2;
var innerRadius = height/3;
var pie = d3.pie(); //饼图数据生成器,将数据生成 {"data": 1, "value": 1, "index": 6, "startAngle": 6.050474740247008, "endAngle": 6.166830023713296, "padAngle": 0},
// .padAngle(0.02);
var color = [
"#98abc5",
"#8a89a6",
"#7b6888",
"#6b486b",
"#a05d56",
"#d0743c",
"#ff8c00"
];
var path = d3
.arc() //弧形生成器,将饼图生成的数据放在弧度生成器里使用。
// .padRadius(outerRadius)
.innerRadius(innerRadius)
.outerRadius(outerRadius);
var svg = d3
.select("body")
.append("svg")
.attr("width", width)
.attr("height", height);
var g = svg
.append("g")
.attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");
var arc = g
.selectAll(".arc")
.data(pie(data))
.enter()
.append("g")
.attr("class", "arc");
arc
.append("path")
.attr("d", path)
.attr("fill", function(d, i) {
return color[i];
})
arc
.append("text")
.attr("transform", function(d) {
return "translate(" + path.centroid(d) + ")";
})
.attr("dy", "0.35em")
.text(function(d) {
return d.value;
});
});
},
};
</script>