How can I detect the intersection of lines on a D3

2019-06-07 06:17发布

I've been playing around with several d3 globes:

And I've put this together:

My goal is to show that this graph can be 3 colored.

The problem I'm having is that the method of drawing lines involves using the orthographic projection of "LineString" paths. In the globe I linked above, my "great circles" are coded in this way:

// poles
svg.append("path")
    .datum({type: "LineString", coordinates: [[0, -180], [0, -90], [0, 0], [0, 90], [0, 180]]})
    .attr("class", "equator")
    .attr("d", path);
// "vertical variants"
svg.append("path")
    .datum({type: "LineString", coordinates: [[40, -180], [40, -90], [40, 0], [40, 90], [40, 180]]})
    .attr("class", "equator")
    .attr("d", path);
svg.append("path")
    .datum({type: "LineString", coordinates: [[60, -180], [0, -80], [60, 0], [180, 80], [60, 180]]})
    .attr("class", "equator2")
    .attr("d", path);




// equator
svg.append("path")
    .datum({type: "LineString", coordinates: [[-180, 0], [-90, 0], [0, 0], [90, 0], [180, 0]]})
    .attr("class", "equator")
    .attr("d", path);
// "horizontal variants"
svg.append("path")
    .datum({type: "LineString", coordinates: [[-180, 40], [-90, 0], [0, -40], [90, 0], [180, 40]]})
    .attr("class", "equator3")
    .attr("d", path);

svg.append("path")
    .datum({type: "LineString", coordinates: [[-180, 20], [-90, 20], [0, -20], [90, -20], [180, 20]]})
    .attr("class", "equator")
    .attr("d", path);

svg.append("path")
    .datum({type: "Point", coordinates: [60, -30]})
    .attr("class", "point")
    .attr("d", path);

The tricky part here is understanding the coordinates: [[-180, 40], [-90, 0], [0, -40], [90, 0], [180, 40]]

I get that we're basically talking "longitude and latitude" here with these coordinates, and I'm able to use these to build "great circles" that wrap the globe.

The problem I'm having is calculating if great circles added with this kind of coordinate system intersect.

For example, in the above linked globe I put a blue point near 3 very close points of intersection of a red line, the green line and a blue line. I have no idea how to calculate where exactly these 3 points of intersection actually lie.

Is there a way to simply have d3 detect the points of intersection of my "LineString" paths?

I want to be able to put points on these intersections, and also track which "great circles" are involved with the intersection...

Alternatively, can someone point me toward a way of calculating this from the projected coordinate system used here by d3?

0条回答
登录 后发表回答