在给定度数的情况下,从圆心到外弧绘制一条直线

时间:2014-07-29 13:04:26

标签: javascript math d3.js

CORRECTED

这实际上并没有下降到数组,直到行数组和SegandSubSegCount。基本上我试图画出比我需要的更多的线条。

我有一个动态分割成扇区的圆圈(取决于进来的数据决定了扇区的数量)然后这些扇区被分组成部分(这是先前解决的,当循环绘制部分时我有一个数组如果需要绘制一条线,则包含1或0表示(lines []包含此信息))

我在某些情况下使用的代码,但在其他情况下却没有,我看不出原因。我已经在这里呆了几天了,而我只是碰壁了。

我的代码如下

/*var SegandSubSegCount is calculated from a loop and is just the total number of sectors and sections. 

For example there could be 9 sub sectors and 3 sections (3 sectors in each section - in this instance the below code renders the section lines correctly) 

or there could be  13 sub sectors and 4 sections (3 sections have 4 sectors and 1 has 1 sector - in this instance the below code does not render correctly)*/

    var segment =  360 / SegandSubSegCount;
    var segmentWidth = rad / _config.Levels;
    var spindleStartPoint = segmentWidth*2;
    var rad = _config.Radius;

    function xycoord(angle) {
                    return {
                        //convert the angle passed to a radian
                        x: (rad+30) * Math.cos(angle * Math.PI / 180),
                        y: (rad + 30) * Math.sin(angle * Math.PI / 180)
                    };
                }

            //this is used to move the inner radius of where to draw the segment line from so it does not draw from the middle of the circle
                function innerxycoord(angle) {
                    return {
                        //convert the angle passed to a radian
                        x: spindleStartPoint * Math.cos(angle * Math.PI / 180),
                        y: spindleStartPoint * Math.sin(angle * Math.PI / 180)
                    };
                }

                for (var t = 0; t < SegandSubSegCount; t++) {
                    //lines dictates if a line needs to be draw the show a section
                    if (lines[t] === 1) {                    
                        var angle = segment * t;
                        var inner = innerxycoord(angle);
                        var tip = xycoord(angle);
                        coords.push({ x1: inner.x, y1: inner.y, x2: tip.x, y2: tip.y, colour: "white", width: 0.5, opacity: 0.5 });
                    }
                }

在它工作的情况下,线条绘制在正确的位置(如在其下方绘制的扇形线所示,并且剖面线正确排列)

当它不起作用时,截面线数学上升为0度,但然后关闭所有其他扇形线。

下面是不工作时的图像

Example of when it is not working

0 个答案:

没有答案