svgとd3.jsの線の交点を指す方法

Question

こんにちは、私はd3.jsを使ってグリッドを描いています。グリッドは、私はその交差点は私のようになりますmouseOnclickを使用して、行と列の交点をマークすべきか、10行5列で構成され、そのポイントが交差されていることを示す。ここ

var svg = d3.select("body").append("svg").attr("width", 500).attr("height", 500); 



var inputs = [ 
{ "x1": 100, "x2": 500, "y1": 50, "y2": 50}, 
{ "x1": 100, "x2": 500, "y1": 90, "y2": 90}, 
{ "x1": 100, "x2": 500, "y1": 130, "y2": 130}, 
{ "x1": 100, "x2": 500, "y1": 170, "y2": 170}, 
{ "x1": 100, "x2": 500, "y1": 210, "y2": 210}, 
{ "x1": 100, "x2": 500, "y1": 250, "y2": 250}, 
{ "x1": 100, "x2": 500, "y1": 290, "y2": 290}, 
{ "x1": 100, "x2": 500, "y1": 330, "y2": 330}, 
{ "x1": 100, "x2": 500, "y1": 370, "y2": 370}, 
{ "x1": 100, "x2": 500, "y1": 400, "y2": 400}, 



//columns 
{ "x1": 100, "x2": 100, "y1": 50, "y2": 400}, 
{ "x1": 200, "x2": 200, "y1": 50, "y2": 400}, 
{ "x1": 300, "x2": 300, "y1": 50, "y2": 400}, 
{ "x1": 400, "x2": 400, "y1": 50, "y2": 400}, 
{ "x1": 500, "x2": 500, "y1": 50, "y2": 400}, 
] 

     svg.selectAll("line").data(inputs).enter().append("line") 

     .attr("x1", function(d) { 
      return d.x1; 
     }) 
     .attr("x2", function(d) { 
      return d.x2; 
     }) 
     .attr("y1", function(d) { 
      return d.y1; 
     }) 
     .attr("y2", function(d) { 
      return d.y2; 
     }) 
     .attr("stroke", "red") 

は私のバイオリンです：https://jsfiddle.net/7mmgedax/

Answer 1

配列を行と列に分割し、各点の交点を見つける必要があります。ポイントの交差点のための非常に基本的なアルゴリズムは次のようになります。作業のデモはhttps://jsfiddle.net/8gguunnq/1/

で発見することができます

function calculateIntersectionPoint(line1StartX, line1StartY, line1EndX, line1EndY, line2StartX, line2StartY, line2EndX, line2EndY) { 
    // if the lines intersect, the result contains the x and y of the intersection (treating the lines as infinite) and booleans for whether line segment 1 or line segment 2 contain the point 
    var denominator, a, b, numerator1, numerator2, result = { 
     x: null, 
     y: null, 
     onLine1: false, 
     onLine2: false 
    }; 
    denominator = ((line2EndY - line2StartY) * (line1EndX - line1StartX)) - ((line2EndX - line2StartX) * (line1EndY - line1StartY)); 
    if (denominator == 0) { 
     return result; 
    } 
    a = line1StartY - line2StartY; 
    b = line1StartX - line2StartX; 
    numerator1 = ((line2EndX - line2StartX) * a) - ((line2EndY - line2StartY) * b); 
    numerator2 = ((line1EndX - line1StartX) * a) - ((line1EndY - line1StartY) * b); 
    a = numerator1/denominator; 
    b = numerator2/denominator; 

    // if we cast these lines infinitely in both directions, they intersect here: 
    result.x = line1StartX + (a * (line1EndX - line1StartX)); 
    result.y = line1StartY + (a * (line1EndY - line1StartY)); 
/* 
     // it is worth noting that this should be the same as: 
     x = line2StartX + (b * (line2EndX - line2StartX)); 
     y = line2StartX + (b * (line2EndY - line2StartY)); 
     */ 
    // if line1 is a segment and line2 is infinite, they intersect if: 
    if (a > 0 && a < 1) { 
     result.onLine1 = true; 
    } 
    // if line2 is a segment and line1 is infinite, they intersect if: 
    if (b > 0 && b < 1) { 
     result.onLine2 = true; 
    } 
    // if line1 and line2 are segments, they intersect if both of the above are true 

    return result; 
}; 

どこ交点に円が描かれています。境界条件を省略したい場合は、ループ制限をhttps://jsfiddle.net/8gguunnq/2/として変更してください。