我有一个使用 RaphaelJS 库生成的图表。它只是在漫长的道路上:
米50 122大号63.230769230769226 130L的76.46153846153845 130L的89.6923076923077 128 L&102.92307692307692 56大号116.15384615384615 1061 129.3846153846154 88大号142.6153846153846 114大号155.84615384615384 52大号169.07692307692307 30升182.3076923076923 62升195.53846153846152 130L的208.76923076923077 74大号222 130L的235.23076923076923 66大号248.46153846153845 102大号261.6923076923077 32升274.9230769230769 130L的288.15384615384613 130L的301.38461538461536 32升314.6153846153846 86大号327.8461538461538 130L的341.0769230769230470μL的354.30769230769226 130L的367.53846153846155 102大号380.7692307692308 120升394 112大号407.2307692307692 68升420.46153846153845 48大号433.6923076923077 92大号446.9230769230769 128 L&460.15384615384613为110l 473.38461538461536 7 L 486.6153846153846 130 升 499.8461538461538 56 升 513.0769230769231 116 升 526。3076923076923 80升539.5384615384614 58升552.7692307692307 40升566 130L的579.2307692307692:94L 592.4615384615385 64大号605.6923076923076 122大号618.9230769230769 98大号632.1538461538461 120升645.384615384615470μL的658.6153846153845 82大号671.8461538461538 76大号685.0769230769231 124大号698.3076923076923为110l 711.5384615384615:94L 724.7692307692307 130L的738 130大号751.2307692307692 66大号764.4615384615385 118大号777.692307692307670μL的790.9230769230769 130L的804.1538461538461 44大号817.3846153846154 130L的830.6153846153845 36大号843.8461538461538 92大号857.076923076923 130L的870.3076923076923 76大号883.5384615384614 130L的896.7692307692307将60μL910 88384615384615470μL的658.6153846153845 82大号671.8461538461538 76大号685.0769230769231 124大号698.3076923076923为110l 711.5384615384615:94L 724.7692307692307 130L的738 130L的751.2307692307692 66大号764.4615384615385 118大号777.692307692307670μL的790.9230769230769 130L的804.1538461538461 44大号817.3846153846154 130L的830.6153846153845 36大号843.8461538461538 92大号857.076923076923 130 L 870.3076923076923 76 L 883.5384615384614 130 L 896.7692307692307 60 L 910 88384615384615470μL的658.6153846153845 82大号671.8461538461538 76大号685.0769230769231 124大号698.3076923076923为110l 711.5384615384615:94L 724.7692307692307 130L的738 130L的751.2307692307692 66大号764.4615384615385 118大号777.692307692307670μL的790.9230769230769 130L的804.1538461538461 44大号817.3846153846154 130L的830.6153846153845 36大号843.8461538461538 92大号857.076923076923 130 L 870.3076923076923 76 L 883.5384615384614 130 L 896.7692307692307 60 L 910 885384615384614 130 升 896.7692307692307 60 升 910 885384615384614 130 升 896.7692307692307 60 升 910 88
同样在这些图表下方,我有一个宽度相同(860 像素)并以图表为中心的 jqueryUI 滑块。当我移动滑块时,我希望根据滑块位置在图表上移动一个点。见附件截图:
如您所见,它似乎工作正常。我已经使用该pathIntersection()
方法实现了这种行为。在每个 ui.value(x 坐标)的幻灯片事件中,我将我的 chartPath(上面的那个)与 x 坐标处的垂直直线相交。
但仍然存在一些问题。其中之一是它运行非常困难,有时它有点冻结..有时很奇怪,它似乎根本不相交,即使它应该..我将在下面我确定的 2 个案例中举例:
M 499.8461538461538 0 L 499.8461538461538 140
M 910 0 L 910 140
您能否解释一下为什么会发生这种相交行为(它应该返回一个点).. 最糟糕的部分似乎是随机发生的.. 如果我使用另一个图表数据。
此外,如果您可以确定另一种(更好的)解决方案来同步滑块位置与图表上的点.. 将是完美的。
我想过使用Element.getPointAtLength(length)
,但我不知道如何。我想我应该保存 pathSegments 并为每个计算开始长度和结束长度。