0

RaphaelJS ライブラリを使用して生成されたグラフがあります。それはちょうど長い道のりにあります：

M 50 122 L 63.230769230769226 130 L 76.46153846153845 130 L 89.6923076923077 128 L 102.92307692307692 56 L 116.15384615384615 106 L 129.3846153846154 88 L 142.6153846153846 114 L 155.84615384615384 52 L 169.07692307692307 30 L 182.3076923076923 62 L 195.53846153846152 130 L 208.76923076923077 74 L 222 130 L 235.23076923076923 66 L 248.46153846153845 102 L 261.6923076923077 32 L 274.9230769230769 130 L 288.15384615384613 130 L 301.38461538461536 32 L 314.6153846153846 86 L 327.8461538461538 130 L 341.07692307692304 70 L 354.30769230769226 130 L 367.53846153846155 102 L 380.7692307692308 120 L 394 112 L 407.2307692307692 68 L 420.46153846153845 48 L 433.6923076923077 92 L 446.9230769230769 128 L 460.15384615384613 110 L 473.38461538461536 78 L 486.6153846153846 130L 499.8461538461538 56L 513.0769230769231 116L 526.3076923076923 80 L 539.5384615384614 58 L 552.7692307692307 40 L 566 130 L 579.2307692307692 94 L 592.4615384615385 64 L 605.6923076923076 122 L 618.9230769230769 98 L 632.1538461538461 120 L 645.3846153846154 70 L 658.6153846153845 82 L 671.8461538461538 76 L 685.0769230769231 124 L 698.3076923076923 110 L 711.5384615384615 94 L 724.7692307692307 130 L 738 130 L 751.2307692307692 66 L 764.4615384615385 118 L 777.6923076923076 70 L 790.9230769230769 130 L 804.1538461538461 44 L 817.3846153846154 130 L 830.6153846153845 36 L 843.8461538461538 92 L 857.076923076923 130 L 870.3076923076923 76 L 883.5384615384614 130 L 896.7692307692307 60 L 910 883846153846154 70 L 658.6153846153845 82 L 671.8461538461538 76 L 685.0769230769231 124 L 698.3076923076923 110 L 711.5384615384615 94 L 724.7692307692307 130 L 738 130 L 751.2307692307692 66 L 764.4615384615385 118 L 777.6923076923076 70 L 790.9230769230769 130 L 804.1538461538461 44 L 817.3846153846154 130 L 830.6153846153845 36 L 843.8461538461538 92 L 857.076923076923 130 L 870.3076923076923 76 L 883.5384615384614 130 L 896.7692307692307 60 L 910 883846153846154 70 L 658.6153846153845 82 L 671.8461538461538 76 L 685.0769230769231 124 L 698.3076923076923 110 L 711.5384615384615 94 L 724.7692307692307 130 L 738 130 L 751.2307692307692 66 L 764.4615384615385 118 L 777.6923076923076 70 L 790.9230769230769 130 L 804.1538461538461 44 L 817.3846153846154 130 L 830.6153846153845 36 L 843.8461538461538 92 L 857.076923076923 130 L 870.3076923076923 76 L 883.5384615384614 130 L 896.7692307692307 60 L 910 885384615384614 130L 896.7692307692307 60L 910 885384615384614 130L 896.7692307692307 60L 910 88

また、これらのグラフの下には、同じ幅 (860px) の jqueryUI スライダーがあり、グラフの中央に配置されています。スライダーを動かすと、スライダーの位置に応じてチャート上のドットが移動します。添付のスクリーンショットを参照してください。

開始位置

滑り挙動

ご覧のとおり、問題なく動作しているようです。メソッドを使用してこの動作を実装しましたpathIntersection()。各 ui.value (x 座標) のスライド イベントで、chartPath (上のもの) と x 座標の垂直直線を交差させます。

しかし、まだいくつかの問題があります。それらの1つは、それが非常に激しく実行され、時々フリーズすることです..そして、非常に奇妙に、交差するはずなのにまったく交差しないように見えることがあります..私が特定した2つのケースを以下に示します。

M 499.8461538461538 0 L 499.8461538461538 140

M 910 0 L 910 140

この交差動作が発生する理由を説明していただけますか (ドットを返す必要があります)。最悪の部分は、ランダムに発生するようです..別のチャートデータを使用すると.

また、スライダーの位置をチャート上のドットと同期させるための別の（より良い）ソリューションを特定できれば..完璧です。

を使おうと思っElement.getPointAtLength(length)たのですが、やり方がわかりません。pathSegments を保存し、それぞれについて開始の長さと終了の長さを計算する必要があると思います。

4

1 に答える 1

1

ソースデータを使って交点を手動で見つけたほうがいいと思います。ポイントはすでに でソートされているので、それほど難しくはありませんx。

頂点の 1 つで交差をチェックすると、パスの交差が失敗しているように見えます。これはバグと見なすことができますが、そもそもライブラリが計算ジオメトリを対象としていないため、それほど驚くことではありません。

簡単なハックとしてx、pathIntersection が単一の値の生成に失敗したときに値を少し変更して、もう一度チェックすることもでき499.8461538461538 + 0.0001 * (2 * Math.random() - 1)ます499.8461538461538。適切な答えを得るまでに何度か試す必要があるかもしれませんが、ここではそうではありません。この手法は一般に摂動として知られていると思います。

于 2012-10-04T15:35:55.713 に答える