Question

我有一个用户点击的代码，光线跟随鼠标。路径使用斜率公式计算，有时斜率可以是 Infinity 和 -Infinity 。当发生这种情况时，我想将y坐标的值更改为视口的最大或最小高度。

我不知道该怎么做。当我console.log(pathArray[1].y)时，它显示值已更改，但我不确定如何在实际执行某些操作的位置实现该值。这是我最近的尝试。（而here是我的小提琴）请帮助！

svg.on('mousedown', mousedown);
function mousedown() {
    isDown = !isDown;
    m1 = d3.mouse(this);
    pathArray = [ { 'x': m1[0], 'y': m1[1] } ];
    if(firstClick) {        
         line = svg.append('path')
            .attr('d', lineFunction(pathArray))
            .attr({'stroke': 'turquoise', 'stroke-width': 5, 'fill': 'none'});
    }
    firstClick = !firstClick;
}

编辑我改变了这个鼠标。

svg.on('mousemove', mousemove);
function mousemove() {
    m2 = d3.mouse(this);
    if(m == Number.POSITIVE_INFINITY || m == Number.NEGATIVE_INFINITY) {
        var equalsInfinity = true;
        if(m == Number.POSITIVE_INFINITY) {
            var isPosInf = true;
            var isNegInf = false;
       } else if(m == Number.NEGATIVE_INFINITY) {
            var isNegInf = true;
            var isPosInf = false;
       } 
    } else {
     equalsInfinity = false;
    }

    var toLeft = ['M', m1[0], m1[1], 
                  'L', 0, getY(m1[0], m1[1], m2[0], m2[1], isLeft)].join(' ');        

    var toRight = ['M', m1[0], m1[1], 
                   'L', 850, getY(m1[0], m1[1], m2[0], m2[1], isLeft, isLeft)].join(' ');  

    var pInf = ['M', m1[0], m1[1], 
                'L', m2[0], getY(m1[0], m1[1], m2[0], min)].join(' ');

    var nInf = ['M', m1[0], m1[1], 
                'L', m2[0], getY(m1[0], m1[1], m2[0], max)].join(' ');

    var isInfinity = isPosInf ? pInf : isNegInf ? nInf : 'neither';
    var rightLeft = isLeft ? toLeft : toRight;

    if(isDown){
        if((m2[0] - m1[0]) > 0) {
            isLeft = false;            
        } else {
            isLeft = true;
        }   

        line.attr('d', equalsInfinity ? isInfinity : rightLeft);      
    }    
}

Answer 1

嗯，我得到了一些帮助，结果证明我的方式比它需要的更复杂。这是他帮助我弄清楚的解决方案：

function mousemove() {
    m2 = d3.mouse(this);         
    var equalsZero = false, isPosInf, isNegInf, equalsInfinity;  

    if(isDown){
        if((m2[0] - m1[0]) > 0) {
            isLeft = false;
            pathArray[1] = { x: 500, y: getY(m1[0], m1[1], m2[0], m2[1], isLeft) };
        } else if((m2[0] - m1[0]) < 0) {
            isLeft = true;
            pathArray[1] = { x: 0, y: getY(m1[0], m1[1], m2[0], m2[1], isLeft) };
        } else if((m2[0] - m1[0]) === 0) {
            equalsZero = true; 
        }    

        if(equalsZero) {
            equalsInfinity = true;
            if(m === Number.POSITIVE_INFINITY){
                pathArray[1] = { x: m2[0], y: 500 };
            }
            else if(m === Number.NEGATIVE_INFINITY){
            pathArray[1] = { x: m2[0], y: 0 };
            }
        } else {
            equalsInfinity = false;   
        }
        line.attr('d', lineFunction(pathArray));
    }    
}

d3 - 当等于无穷大时改变路径值

1 个答案: