我需要在绿色半径的连续处绘制。
我尝试以相同的半径绘制，但是，que值从 Angular 0开始，但我需要从绿色的端点开始绘制。
<!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>
这里是实际径向图表的图像:
最佳答案
您需要指定 arc4 的起始 Angular ，即绿色路径的结束 Angular :
_arc4.startAngle(endAngle);//endangle of the green path
下一步更改:
在补间中，起始位置应为上面设置的位置，即绿色圆弧的结束 Angular 。
function arcTween4(a) {
var i = d3.interpolate(_arc4.startAngle()(), a);//start from endangle
return function(t) {
return _arc4.endAngle(i(t))();
};
}
工作代码here
希望这有帮助!
关于javascript - 如何从最后一个半径终点开始绘制，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/34674469/