D3线路相交 [英] D3 Line-Path Intersection

问题描述

我使用D3，我遇到一个问题。基本上，我有一个小的面积图，其域的更改基于画笔（类似于此示例：）...但它是写在9年前...，不知道如果它仍然是最新的。此外，还有一个示例，您可以在路径中找到点（ http：//bl.ocks。 org / mbostock / 1705868 ）但是，我想知道如何找到沿着路径，接近参考线的点？有没有人有任何想法如何解决这个问题？先感谢。

解决方案

感谢您的链接。有兴趣得到其他方法来解决它。事实证明，我想出来...基本上使用一些插值。你看到我知道d0和d1是参考线两边的点，对应于我从我的CSV文件知道的数据之间。所以，基本上我只需要找出这两个点之间的参考线​​的位置，计算一个加权百分比...然后乘以两个权重乘以两个已知点的y值，然后你有它。我的新函数看起来像这样：

  function ref_move（d）{
 var x0 = x.invert（dx  - 35），
i = bisectDate（data，x0,1），
 d0 = data [i-1]，
 d1 = data [i]，
 span = d1.date）-x（d0.date）），
 weight =（x（x0）-x（d0.date））/ span，
 newy =（d1.Light * weight）+ d0.Light *（1.0重量））; 
 
 ref_tooltip.attr（transform，translate（+（x（x0）+ margin.left）+，+（y（newy）+ light_offset）+） 
} 
  

这似乎已经解决了我的问题。谢谢您的帮助。我会好奇，如果有其他方法来解决它。再次感谢。

I'm working with D3 and I've run into a bit of a problem. Basically, I have a small area chart whose domain changes based on a brush (similar to this example: http://bl.ocks.org/mbostock/1667367). I've created a line which can be dragged around and what I had hoped to do is provide a tooltip where this line intersected the area chart. I've created a function which bisects the data from the chart based on the x-value of the line and returns the closest data point... the issue is that this doesn't always line up with the reference line, especially if the brush has been set really small so there are only a few points being interpolated in the area chart. Here's an image of what I'm talking about.

So, my question is it possible to somehow create a path-line intersection function which will determine the exact location where the two paths meet and return a value I can use for a tooltip? The function I'm currently using is below... but like I said, this doesn't seem to work well when the brush is set to a small area.

function ref_move(d) {
     var x0 = x.invert(d.x -35),
        i = bisectDate(data, x0, 1),
        d0 = data[i - 1],
        d1 = data[i],
        d = x0 - d0.date > d1.date - x0 ? d1 : d0;

        ref_tooltip.attr("transform", "translate(" + (x(d.date) + margin.left) + "," +   (y(d.Light) + light_offset) + ")");
  }

I've done some research on this issue and haven't come up with much of a solution. There is a library written by Kevin Lindsey which does some sort of intersection testing (http://www.kevlindev.com/geometry/2D/intersections/index.htm)... but it was written around 9 years ago... and not sure if it's still current. Additionally, there is an example where you can find a point along a path (http://bl.ocks.org/mbostock/1705868) but, I'm wondering how I can find the point along the path which is closes to the reference line? Does anyone have any ideas on how to solve this problem? Thanks in advance.

解决方案

Thanks for the link. Interesting to get other ways to solve it. It turns out that I figured it out... essentially using some interpolation. You see I knew d0 and d1 which were the points on either side of the reference line that corresponded between data that I knew from my CSV file. So, basically I just needed to find out the position of the reference line between these two points to figure out a weighted percentage... and then multiply the two weights times the y value of the two known points and then you have it. My new function looks like this:

function ref_move(d) {
     var x0 = x.invert(d.x -35),
        i = bisectDate(data, x0, 1),
        d0 = data[i - 1],
        d1 = data[i],
        span = (x(d1.date) - x(d0.date)),
        weight = (x(x0) - x(d0.date))/span,
        newy = (d1.Light * weight) + (d0.Light * (1.0-weight));

        ref_tooltip.attr("transform", "translate(" + (x(x0) + margin.left) + "," + (y(newy) + light_offset) + ")");
 }

This seems to have fixed my issue. Thanks for the help. I'd be curious if there are other ways to solve it. Thanks again.

这篇关于D3线路相交的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！