用d3.js绘制0到360度的弧度

时间:2016-06-11 08:23:31

标签: math d3.js

你可以看到这个here的一个有效例子。

我的问题是关于内部的小蓝弧。我想显示从0开始的弧,并从0到360进行斜边。

目前m代码看起来像是添加了弧:

const hypotenuseCoords = {
  x1: hypotenuseCentre,
  y1: parseFloat(state.hypotenuse.attr('y1')),
  x2: xTo,
  y2: dy
};

const angle = Math.atan2(hypotenuseCoords.y2 - hypotenuseCoords.y1, hypotenuseCoords.x2 - hypotenuseCoords.x1);

const arc = d3.svg.arc()
        .innerRadius(15)
        .outerRadius(20)
        .startAngle(Math.PI/2)
        .endAngle(angle + Math.PI/2);

state.innerAngle
  .attr('d', arc)
  .attr('transform', `translate(${hypotenuseCentre}, 0)`);

问题是弧只从0变为pi或180,从180变为360.我认为坐标中的startAngle是错误的。

如何让弧从0到360右旋?

1 个答案:

答案 0 :(得分:3)

计算class Counter(object): # new style object definition. def __init__( self, num ): self.value = num # this is 32bit int max as well, same as pow(2,32) function. self.maximum = 0xFFFFFFFF def increase(self): self.value += 1 if self.value > self.maximum: self.value -= self.maximum def __repr__( self ): # representation function. return str(self.value) def __str__( self ): # string function return str(self.value) counter = Counter(10) print counter counter.increase() print counter counter.increase() print counter 后,请尝试:

angle

如果我的触发是正确的:)

更新:玩这个小提琴来查看问题:http://jsfiddle.net/rcb94j8m/

if(angle>0) angle = -2*(Math.PI) + angle; 对于象限1和2中的光线表现良好,但在象限3和4中给你带来了麻烦。atan2()移位让你到达同一条光线,但向另一个方向移动。对-2*(Math.PI)atan2()的符号约定进行一些研究可能会让您更好地解释。如果你在这里发帖,我会有兴趣阅读你的结论。