我正在使用OO JavaScript,我正在尝试为我的类实现一个接口,如D3
。
var object = ObjectType
.property1(value)
.property2(value)
我的类构建2个SVG弧(一个用于背景,一个用于值),但由于我设置的方式,它是在其值初始化之前构建的。我真的想用我上面描述的模式构建,但我找不到合适的资源。
var tempArc = new AnnularSection(-90, 90, 120, 140);
.valueColor = "#77933c";
function AnnularSection(startAngle, endAngle, moveRight, moveDown) {
this.startAngle = startAngle * Math.PI/180;
this.endAngle = endAngle * Math.PI/180;
this.moveRight = moveRight;
this.moveDown = moveDown;
this.valueColor;
this.section = d3.svg.arc()
.innerRadius(93)
.outerRadius(118)
.startAngle(this.startAngle)
.endAngle(this.endAngle);
svg.append("path")
.attr("class", "arc")
.attr("d", this.section)
.attr("transform", "translate(" + moveRight + "," + moveDown + ")");
this.valueArc = d3.svg.arc()
.innerRadius(93)
.outerRadius(118)
.startAngle(this.startAngle)
.endAngle(this.endAngle);
this.value = svg.append("path")
.attr("fill", this.valueColor)
.attr("d", this.valueArc)
.attr("transform", "translate(" + moveRight + "," + moveDown + ")");
this.updateValue = function (newEnd) {
console.log(this);
this.valueArc.transition().duration(750).call(arcTween, newEnd);
function arcTween(transition, newEnd) {
transition.attrTween("d", function(d) {
var interpolateEnd = d3.interpolate(d.endAngle, endAngle);
return function(t) {
d.endAngle = interpolateEnd(t);
return arc(d);
};
});
}
}
}