1

我正在使用 D3，但遇到了一些问题。基本上，我有一个小面积图，其域根据画笔而变化（类似于此示例：http ://bl.ocks.org/mbostock/1667367 ）。我创建了一条可以拖动的线，我希望做的是提供一个工具提示，该线与面积图相交。我创建了一个函数，它根据线的 x 值将图表中的数据一分为二并返回最近的数据点......问题是这并不总是与参考线对齐，特别是如果笔刷已经设置得非常小，所以在面积图中只有几个点被插值。这是我正在谈论的图像。 线交叉问题

所以，我的问题是有可能以某种方式创建一个路径线相交函数，该函数将确定两条路径相遇的确切位置并返回一个可用于工具提示的值？我目前正在使用的功能如下……但就像我说的，当画笔设置为小区域时，这似乎效果不佳。

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) + ")");
  }

我已经对这个问题进行了一些研究，但还没有想出太多的解决方案。有一个由 Kevin Lindsey 编写的库，它进行某种交叉测试（http://www.kevlindev.com/geometry/2D/intersections/index.htm）......但它是在大约 9 年前编写的......并且不确定它是否仍然是最新的。此外，还有一个示例，您可以在路径上找到一个点（http://bl.ocks.org/mbostock/1705868）但是，我想知道如何找到靠近路径的点参考线？有没有人对如何解决这个问题有任何想法？提前致谢。

4

2 回答 2

0

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

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) + ")");
 }

这似乎解决了我的问题。谢谢您的帮助。我很好奇是否有其他方法可以解决它。再次感谢。

于 2013-04-03T23:21:17.713 回答
0

对于 KenlinDel 库，我设法使用 D3 找到两条路径的交点，但其他形状存在问题，我正在做的实际解决方案是

chordshapes = Array()
svg.selectAll("g.Chords")
     .data(data)
     ..attr("d", function (d,i) {
                                 var shape = new Path() // from D2.js
                                 //get the path
                                 var pathStr = chrod(innerRadius, d.source, d.target)
                                 //Initialize a new path object
                                 shape.parseData(pathStr) 
                                 chordshapes[i] = shape;
                                 return pathStr;
                             })

所以这里 chordShapes 包含每个路径的 Path 对象，然后当我点击例如画笔时，我可以为画笔矩形创建另一个形状并检查交点如下

........
var intersect Intersection.intersectShapes(chordshapes[i], brushShape)
if(intersect.points.length >0) {
 ..........
}
于 2014-03-17T09:34:43.500 回答