Javascript 如何从最后一个半径饰面绘制
我需要在绿色半径的继续处绘制 我试图以相同的半径绘制，但是，que值从角度0开始，但我需要从绿色的结束角度开始绘制Javascript 如何从最后一个半径饰面绘制,javascript,css,d3.js,charts,donut-chart,Javascript,Css,D3.js,Charts,Donut Chart,我需要在绿色半径的继续处绘制 我试图以相同的半径绘制，但是，que值从角度0开始，但我需要从绿色的结束角度开始绘制 <!DOCTYPE html> <head> <meta HTTP-EQUIV="X-UA-COMPATIBLE" CONTENT="IE=EmulateIE9" > <script type="text/javascript" src="scripts/d3.min.js"></script>
<!DOCTYPE html>
<head>
<meta HTTP-EQUIV="X-UA-COMPATIBLE" CONTENT="IE=EmulateIE9" >
<script type="text/javascript" src="scripts/d3.min.js"></script>
<link type="text/css" rel="stylesheet" href="styles/style.css">
<style>
body {
background-color: #FFFFFF;
}
#outer {
background:#FFFFFF;
border-radius: 5px;
color: #000;
}
#div2{
width: 100%;
height: 200px;
box-sizing: border-box;
float: left;
}
#div2 .arc {
stroke-weight: 0.1;
fill: #16A765;
}
#div2 .arc2 {
stroke-weight: 0.1;
fill: #777777;
}
#div2 .arc3 {
stroke-weight: 0.1;
fill: #EE9A00;
}
#div2 .arc4 {
stroke-weight: 0.1;
fill: #7171C6;
}
.radial {
border-radius: 3px;
background: #FFFFFF;
color: #000;
display: none;
}
</style>
</head>
<body>
<div id='outer' style="margin-top:40px; padding:10px">
<div id="main" style="width:600; height:200px; margin: 0px auto; ">
<div id="div2"></div>
</div>
</div>
<script language="JavaScript">
start();
function labelFunction(val,min,max) {
}
function deselect() {
div2.attr("class","radial");
}
function start() {
var rp2 = radialProgress(document.getElementById('div2'))
.diameter(250)
//verd
.value(15000)
//gris
.value2(30000)
//taronja
.value3(15000)
//blau
.value4(35000)
.render();
}
function radialProgress(parent) {
var _data=null,
_duration= 1000,
_selection,
_margin = {top:0, right:0, bottom:0, left:0},
__width = 300,
__height = 300,
_diameter = 150,
_label="",
_fontSize=10;
var _mouseClick;
var _value = 0,
_value2 =0,
_value3 =0,
_value4 =0,
_minValue = 0,
_maxValue = 86400;
var _currentArc= 0, _currentArc2= 0, _currentArc3= 0, _currentArc4=0, _currentValue=0;
var _arc = d3.svg.arc()
.startAngle(0 * (Math.PI/180)); //just radians
var _arc2 = d3.svg.arc()
.startAngle(0 * (Math.PI/180))
.endAngle(0); //just radians
var _arc3 = d3.svg.arc()
.startAngle(0 * (Math.PI/180))
.endAngle(0); //just radians
var _arc4 = d3.svg.arc()
.startAngle(0 * (Math.PI/180))
.endAngle(0); //just radians
_selection=d3.select(parent);
function component() {
_selection.each(function (data) {
// Select the svg element, if it exists.
var svg = d3.select(this).selectAll("svg").data([data]);
var enter = svg.enter().append("svg").attr("class","radial-svg").append("g");
measure();
svg.attr("width", __width)
.attr("height", __height);
var background = enter.append("g").attr("class","component")
.on("click",onMouseClick);
_arc.endAngle(360 * (Math.PI/180))
background.append("rect")
.attr("class","background")
.attr("width", _width)
.attr("height", _height);
background.append("path")
.attr("transform", "translate(" + _width/2 + "," + _width/2 + ")")
.attr("d", _arc);
_arc.endAngle(_currentArc);
enter.append("g").attr("class", "arcs");
var path = svg.select(".arcs").selectAll(".arc").data(data);
path.enter().append("path")
.attr("class","arc")
.attr("transform", "translate(" + _width/2 + "," + _width/2 + ")")
.attr("d", _arc);
var path2 = svg.select(".arcs").selectAll(".arc2").data(data);
path2.enter().append("path")
.attr("class","arc2")
.attr("transform", "translate(" + _width/2 + "," + _width/2 + ")")
.attr("d", _arc2);
var path3 = svg.select(".arcs").selectAll(".arc3").data(data);
path3.enter().append("path")
.attr("class","arc3")
.attr("transform", "translate(" + _width/2 + "," + _width/2 + ")")
.attr("d", _arc3);
var path4 = svg.select(".arcs").selectAll(".arc4").data(data);
path4.enter().append("path")
.attr("class","arc4")
.attr("transform", "translate(" + _width/2 + "," + _width/2 + ")")
.attr("d", _arc4);
enter.append("g").attr("class", "labels");
var label = svg.select(".labels").selectAll(".label").data(data);
label.enter().append("text")
.attr("class","label")
.attr("y",_width/2+_fontSize/3)
.attr("x",_width/2)
.attr("width",_width)
// .attr("x",(3*_fontSize/2))
.style("font-size",_fontSize+"px")
.on("click",onMouseClick);
path.exit().transition().duration(500).attr("x",1000).remove();
layout(svg);
function layout(svg) {
var ratio4=(_value4-_minValue)/(_maxValue-_minValue);
var ratio3=(_value3-_minValue)/(_maxValue-_minValue);
var ratio2=(_value2-_minValue)/(_maxValue-_minValue);
var ratio=(_value-_minValue)/(_maxValue-_minValue);
var endAngle=Math.min(360*ratio,360);
endAngle=endAngle * Math.PI/180;
path.datum(endAngle);
path.transition().duration(_duration)
.attrTween("d", arcTween);
path2.datum(Math.min(360*(ratio2),360) * Math.PI/180);
path2.transition().delay(_duration).duration(_duration)
.attrTween("d", arcTween2);
path3.datum(Math.min(360*(ratio3),360) * Math.PI/180);
path3.transition().delay(_duration).duration(_duration)
.attrTween("d", arcTween3);
path4.datum(Math.min(360*(-ratio4),360) * Math.PI/180);
path4.transition().delay(_duration).duration(_duration)
.attrTween("d", arcTween4);
label.datum(Math.round(ratio*100));
label.transition().duration(_duration)
.tween("text",labelTween);
}
});
function onMouseClick(d) {
if (typeof _mouseClick == "function") {
_mouseClick.call();
}
}
}
function labelTween(a) {
var i = d3.interpolate(_currentValue, a);
_currentValue = i(0);
return function(t) {
_currentValue = i(t);
this.textContent = "";
}
}
function arcTween(a) {
var i = d3.interpolate(_currentArc, a);
return function(t) {
_currentArc=i(t);
return _arc.endAngle(i(t))();
};
}
function arcTween2(a) {
var i = d3.interpolate(_currentArc2, a);
return function(t) {
return _arc2.endAngle(i(t))();
};
}
function arcTween3(a) {
var i = d3.interpolate(_currentArc3, a);
return function(t) {
return _arc3.endAngle(i(t))();
};
}
function arcTween4(a) {
var i = d3.interpolate(_currentArc4, a);
return function(t) {
return _arc4.endAngle(i(t))();
};
}
function measure() {
_width=_diameter - _margin.right - _margin.left - _margin.top - _margin.bottom;
_height=_width;
_fontSize=_width*.2;
_arc.outerRadius(_width/2);
_arc.innerRadius(_width/2 * .70);
_arc2.outerRadius(_width/2 * .70);
_arc2.innerRadius(_width/2 * .70 - (_width/2 * .15));
_arc3.outerRadius(_width/2 * .55);
_arc3.innerRadius(_width/2 * .55 - (_width/2 * .15));
_arc4.outerRadius(_width/2 * .99);
_arc4.innerRadius(_width/2 * .99 - (_width/2 * .0,5));
}
component.render = function() {
measure();
component();
return component;
}
component.value = function (_) {
if (!arguments.length) return _value;
_value = [_];
_selection.datum([_value]);
return component;
}
component.value2 = function (_) {
if (!arguments.length) return _value2;
_value2 = [_];
_selection.datum([_value2]);
return component;
}
component.value3 = function (_) {
if (!arguments.length) return _value3;
_value3 = [_];
_selection.datum([_value3]);
return component;
}
component.value4 = function (_) {
if (!arguments.length) return _value4;
_value4 = [_];
_selection.datum([_value4]);
return component;
}
component.margin = function(_) {
if (!arguments.length) return _margin;
_margin = _;
return component;
};
component.diameter = function(_) {
if (!arguments.length) return _diameter
_diameter = _;
return component;
};
component.minValue = function(_) {
if (!arguments.length) return _minValue;
_minValue = _;
return component;
};
component.maxValue = function(_) {
if (!arguments.length) return _maxValue;
_maxValue = _;
return component;
};
component.label = function(_) {
if (!arguments.length) return _label;
_label = _;
return component;
};
component._duration = function(_) {
if (!arguments.length) return _duration;
_duration = _;
return component;
};
component.onClick = function (_) {
if (!arguments.length) return _mouseClick;
_mouseClick=_;
return component;
}
return component;
}
</script>
</body>
</html>
身体{
背景色：#FFFFFF；
}
#外{
背景：#FFFFFF；
边界半径：5px；
颜色：#000；
}
#第二组{
宽度：100%；
高度：200px；
框大小：边框框；
浮动：左；
}
#第2部分：弧{
冲程重量：0.1；
填充：#16A765；
}
#第2部分arc2{
冲程重量：0.1；
填充：#777777；
}
#第2.3分部{
冲程重量：0.1；
填写：#EE9A00；
}
#第2部分arc4{
冲程重量：0.1；
填充：#7171C6；
}
.放射状{
边界半径：3px；
背景：#FFFFFF；
颜色：#000；
显示：无；
}
start（）；
功能标签功能（val、min、max）{
}
函数取消选择（）{
第2部分：属性（“类”、“放射状”）；
}
函数start（）{
var rp2=radialProgress（document.getElementById（'div2'））
.直径（250）
//佛得角
.价值（15000）
//格里斯
.2（30000）
//塔罗尼亚
.3（15000）
//布劳
.价值4（35000）
.render（）；
}
函数半径进程（父级）{
var_data=null，
_持续时间=1000，
_选择，
_边距={top:0，right:0，bottom:0，left:0}，
__宽度=300，
__高度=300，
_直径=150，
_label=“”，
_fontSize=10；
var_鼠标点击；
var_值=0，
_值2=0，
_值3=0，
_值4=0，
_最小值=0，
_最大值=86400；
var _currentArc=0，_currentArc2=0，_currentArc3=0，_currentArc4=0，_currentValue=0；
var_arc=d3.svg.arc（）
.startAngle（0*（Math.PI/180））；//只有弧度
var_arc2=d3.svg.arc（）
.startAngle（0*（数学PI/180））
.endAngle（0）；//只有弧度
var_arc3=d3.svg.arc（）
.startAngle（0*（数学PI/180））
.endAngle（0）；//只有弧度
var_arc4=d3.svg.arc（）
.startAngle（0*（数学PI/180））
.endAngle（0）；//只有弧度
_选择=d3。选择（父项）；
函数组件（）{
_选择。每个功能（数据）{
//选择svg元素（如果存在）。
var svg=d3.select（this.selectAll（“svg”）.data（[data]）；
var enter=svg.enter（）.append（“svg”）.attr（“class”，“radial svg”）.append（“g”）；
度量（）；
属性（“宽度”，“宽度”）
.attr（“高度”和“高度”）；
var background=enter.append（“g”）.attr（“类”、“组件”）
.on（“单击”，onMouseClick）；
_圆弧端角（360*（数学PI/180））
background.append（“rect”）
.attr（“类别”、“背景”）
.attr（“宽度”、\u宽度）
.attr（“高度”、_高度）；
background.append（“路径”）
.attr（“转换”、“转换”（“+”宽度/2+”，“+”宽度/2+”）
.attr（“d”，_弧）；
_弧端角（_currentArc）；
输入.append（“g”）.attr（“class”，“arcs”）；
var path=svg.select（“.arcs”）.selectAll（“.arc”）.data（数据）；
path.enter（）.append（“路径”）
.attr（“类”、“弧”）
.attr（“转换”、“转换”（“+”宽度/2+”，“+”宽度/2+”）
.attr（“d”，_弧）；
var path2=svg.select（“.arcs”）.selectAll（“.arc2”）.data（数据）；
路径2.enter（）.append（“路径”）
.attr（“类别”、“arc2”）
.attr（“转换”、“转换”（“+”宽度/2+”，“+”宽度/2+”）
.attr（“d”，_arc2）；
var path3=svg.select（“.arcs”）.selectAll（“.arc3”）.data（数据）；
path3.enter（）.append（“路径”）
.attr（“类别”、“arc3”）
.attr（“转换”、“转换”（“+”宽度/2+”，“+”宽度/2+”）
.attr（“d”，_arc3）；
var path4=svg.select（“.arcs”）.selectAll（“.arc4”）.data（数据）；
path4.enter（）.append（“路径”）
.attr（“类别”、“arc4”）
.attr（“转换”、“转换”（“+”宽度/2+”，“+”宽度/2+”）
.attr（“d”，_arc4）；
输入。附加（“g”）.attr（“类别”、“标签”）；
var label=svg。选择（“.labels”）。选择所有（“.label”）。数据（数据）；
label.enter（）.append（“文本”）
.attr（“类别”、“标签”）
.attr（“y”，_宽度/2+_字体大小/3）
.attr（“x”，_宽度/2）
.attr（“宽度”、\u宽度）
//.attr（“x”，（3*fontSize/2））
.style（“字体大小”，“字体大小+”px”）
.on（“单击”，onMouseClick）；
path.exit（）.transition（）.duration（500）.attr（“x”，1000）.remove（）；
布局（svg）；
功能布局（svg）{
var比率4=（最大值-minValue）/（最大值-minValue）；
var比率3=（\u值3-\u最小值）/（\u最大值-\u最小值）；
var比率=（\u value2-\u minValue）/（\u maxValue-\u minValue）；
var比率=（\u值-\u最小值）/（\u最大值-\u最小值）；
变量端角=数学最小值（360*比率，360）；
endAngle=endAngle*Math.PI/180；
路径基准（端角）；
path.transition（）.duration（_duration）
.attrTween（“d”，arcTween）；
路径2.基准（数学最小值（360*（比率），360）*数学PI/180）；
路径2.transition（）.delay（\u duration）.duration（\u duration）
.attrTween（“d”，Arctween 2）；
路径3.基准面（数学最小值（360*（比率），360）*数学PI/180）
_arc4.startAngle(endAngle);//endangle of the green path
function arcTween4(a) {
var i = d3.interpolate(_arc4.startAngle()(), a);//start from endangle
return function(t) {
return _arc4.endAngle(i(t))();
};
}