<!DOCTYPE html>
<head>
<meta charset="utf-8" />
<!-- <script type="text/javascript" src="js/plugins/d3/d3.v3.min.js"></script>-->
<script src="https://d3js.org/d3.v4.min.js"></script>
<style>
</style>
</head>
<style>
body {
background: black
}
</style>
<body>
</body>
<script type="text/javascript">
var width = 700;
var height = 700;
var length = 1; // 圆弧数量
var per = Math.PI / length; // 每份所占弧度
var downPer = Math.PI / downIndex
var outArc = { inRadius: 35, outRadius: 45, startAngle: per, endAnglle: per }
var inArc = { inRadius: 38, outRadius: 42, startAngle: per, endAnglle: per }
var downArc = { inRadius: 39.5, outRadius: 40.5, startAngle: per, endAnglle: per }
var downIndex = 30
var downGroup = 5;
var thickness = downIndex / 4000 // 厚度
var lineLength =outArc.inRadius-1; // 指针的长度
var perLine = Math.PI/180; // 分段
var lineData = 0.8*180 // 角度
var color = d3.scaleOrdinal(d3.schemeCategory20); // 颜色比例尺
var colorNum = []
var colorNum1 = [{ r: 22, g: 48, b: 84 }, { r: 25, g: 48, b: 91 }]
var colorNum2 = [{ r: 16, g: 69, b: 116 }, { r: 28, g: 66, b: 100 }]
var colorNum3 = [{ r: 23, g: 113, b: 167 }, { r: 16, g: 96, b: 151 }]
var colorNum4 = [{ r: 51, g: 179, b: 227 }, { r: 49, g: 188, b: 237 }]
var colorNum5 = [{ r: 92, g: 192, b: 204 }, { r: 87, g: 202, b: 214 }]
colorNum.push(colorNum1)
colorNum.push(colorNum2)
colorNum.push(colorNum3)
colorNum.push(colorNum4)
colorNum.push(colorNum5)
var sliceColorR = []
var sliceColorG = []
var sliceColorB = []
function splitColor() {
var eachIndex = downIndex / downGroup
for (i = 0; i < colorNum.length; i++) {
sliceColorR.push((colorNum[i][1].r - colorNum[i][0].r) / eachIndex)
sliceColorG.push((colorNum[i][1].g - colorNum[i][0].g) / eachIndex)
sliceColorB.push((colorNum[i][1].b - colorNum[i][0].b) / eachIndex)
}
}
function getColor(i) {
splitColor()
if (Math.floor(i / downGroup) == 0) {
r = parseInt(sliceColorR[0] * i) + parseInt(colorNum[0][0].r)
g = parseInt(sliceColorG[0] * i) + parseInt(colorNum[0][0].g)
b = parseInt(sliceColorB[0] * i) + parseInt(colorNum[0][0].b)
}
else if (Math.floor(i / downGroup) == 1) {
r = parseInt(sliceColorR[1] * i) + parseInt(colorNum[1][0].r)
g = parseInt(sliceColorG[1] * i) + parseInt(colorNum[1][0].g)
b = parseInt(sliceColorB[1] * i) + parseInt(colorNum[1][0].b)
}
else if (Math.floor(i / downGroup) == 2) {
r = parseInt(sliceColorR[2] * i) + parseInt(colorNum[2][0].r)
g = parseInt(sliceColorG[2] * i) + parseInt(colorNum[2][0].g)
b = parseInt(sliceColorB[2] * i) + parseInt(colorNum[2][0].b)
}
else if (Math.floor(i / downGroup) == 3) {
r = parseInt(sliceColorR[3] * i) + parseInt(colorNum[3][0].r)
g = parseInt(sliceColorG[3] * i) + parseInt(colorNum[3][0].g)
b = parseInt(sliceColorB[3] * i) + parseInt(colorNum[3][0].b)
}
else {
r = parseInt(sliceColorR[4] * i) + parseInt(colorNum[4][0].r)
g = parseInt(sliceColorG[4] * i) + parseInt(colorNum[4][0].g)
b = parseInt(sliceColorB[4] * i) + parseInt(colorNum[4][0].b)
}
return "rgba(" + r + "," + g + "," + b + ",1)"
}
// 外弧度
var data = d3.range(length).map(function (i) { // 生成圆弧数据
return {
innerRadius: outArc.inRadius,
outerRadius: outArc.outRadius + 15,
startAngle: outArc.startAngle * 1.5,
endAngle: outArc.endAnglle * 2.5
}
});
var dataIn = d3.range(length).map(function (i) { // 生成圆弧数据
return {
innerRadius: inArc.inRadius,
outerRadius: inArc.outRadius + 15,
startAngle: inArc.startAngle * (1.5 + thickness),
endAngle: inArc.endAnglle * (2.5 - thickness)
}
});
var dataDown = d3.range(downIndex).map(function (i) { // 生成圆弧数据
return {
innerRadius: downArc.inRadius,
outerRadius: downArc.outRadius + 15,
startAngle: downArc.startAngle * (1.5 + (i + thickness) / downIndex + thickness),
endAngle: downArc.endAnglle * (1 / downIndex + 1.5 + i / downIndex - thickness)
}
});
var svg = d3.select("body").append("svg")
.attr("width", width)
.attr("height", height)
.append("g")
var arc = d3.arc();
var arcs = svg.selectAll('path')
.data(data)
.enter()
.append('path')
.attr("transform", "translate(150,200)")
.attr("d", function (d) { return arc(d); }) // 生成弧路径数据
.attr("fill", function (d, i) { return color(i); }) // 指定填充颜色
// 弧生成器
var arcIn = svg.selectAll('path1')
.data(dataIn)
.enter()
.append('path')
.attr("transform", "translate(150,200)")
.attr("d", function (d) { return arc(d); }) // 生成弧路径数据
.attr("fill", function (d, i) { return "black" }) // 指定填充颜色
// 弧生成器
var arcsDown = svg.selectAll('path2')
.data(dataDown)
.enter()
.append('path')
.attr("transform", "translate(150,200)")
.attr("d", function (d) { return arc(d); }) // 生成弧路径数据
.attr("fill", function (d, i) { return getColor(i) }) // 指定填充颜色
var line =svg.append("line")
.attr("x1",0)
.attr("y1",0)
.attr("x2",Math.cos(perLine*(180-lineData))*lineLength)
.attr("y2",-Math.sin(perLine*(180-lineData))*lineLength)
.attr("stroke","#3EBFE9")
.attr("stroke-width",2)
.attr("transform", "translate(150,200)")
var circle =svg.append("circle")
.attr("r",3)
.attr("fill","#3EBFE9")
.attr("stroke-width",2)
.attr("transform", "translate(150,200)")
</script>
</html>
来源: http://www.qdfuns.com/notes/48250/918e725eaaad78c1365cfd1a284abf68.html