1

SVG ベースのグラフがあります。上部には、画像に示すように、ユーザーがグラフ内を移動できるスクロール可能な領域があります。

スクロールエリア

左/右のいずれかのタブをドラッグすることにより、ユーザーは図に示すように、プロットの特定の部分を拡大できます。

スクロールした

グラフの選択された部分だけが青色で、灰色で強調表示されていることに注意してください。青とハイライトはどちらも変更されていませんが、クリッピング マスクを使用してクリッピングされています。

<clippath id="clip_path_scroll">
  <rect id="clip_path_scroll_rect" x="x" y="y" width="w" height="h" stroke-width="0" />
</clippath>

と

<g clip-path="url(#clip_path_scroll)">
  <rect id="highlighted" width="w" height="h" x="x" y="y" fill="rgba(0, 0, 0, .03)" stroke="none" />
  <path id="blue_plot" d="..." stroke="rgba(26, 171, 219, 1)" stroke-width="2" fill="none"/>
</g>

そして、これはすべてうまく機能します。タブをドラッグすると、クリップ パスは問題なく機能します。その場合、タブがスライドするにつれて、段階的に変更されます。

しかし、私は以下を呼び出すリセットボタンを持っています:

$('#left_scroll_group').attr('transform', 'translate(0, 0)');
$('#right_scroll_group').attr('transform', 'translate(0, 0)');
$('#clip_path_scroll_rect').attr('width', width).attr('x', x);

これを実行すると、結果は次のようになります。

ポストリセット

タブ グループは本来あるべき場所に正確に戻りますが、クリップ パスは元の幅と x 位置に部分的にしか戻っていないように見えます。

しかし、これは当てはまりません

ページ ソースを表示し、clippathrectオブジェクトにカーソルを合わせると、次のように表示されます。

クリップ パス四角形

つまり、rectオブジェクト DID のサイズが変更されて元の位置に移動したことを示していますが、正しく表示されていません。最初の 2 つの画像のように、いずれかのタブを移動すると、すぐにクリップパスが正常に機能するように戻ります。

なぜこうなった？右のタブが移動された場合でも、左のタブが移動された場合でも、両方が移動された場合でも発生します。タブが少しだけ動かされた場合、大きな問題はないように見えますが、タブがさらに移動するにつれて明らかなグリッチ/エラーが増加します。

同様の関数はクリップパスに対して同じattr変更を行いますが、常にパスの長さを短くします。この不具合は、長さを長くしたときにのみ発生しているようです。

グラフ内の他の多くの要素に対して同じタイプの操作を使用していますが、すべて正常に動作します。すべてが jQuery 表記法​​ (つまり$('#element')) で参照されます。

d3 やその他のライブラリの使用には興味がありません。jQuery または純粋な JS ソリューションのみを探しています。

編集1

私も試してみました

var steps = Math.floor(scrollPlotWidth - $('#clip_path_scroll_rect').attr('width'));
var curWidth = Math.ceil($('#clip_path_scroll_rect').attr('width'));
var curX = $('#clip_path_scroll_rect').attr('x');

for(var i = 0; i < steps; i++){
    $('#clip_path_scroll_rect').attr('x', curX).attr('width', curWidth);
    curX--;
    curWidth++;
}

成功しませんでした。変更は段階的に行われていますが、サイコロはまだありません。以前と同じように見えます。このクリッピングの問題は Safari でのみ発生しており、FireFox では問題ないようです。他の人をテストしていません。

ワーキングソリューション（ハッキング）

クリップパス内で を定義するときrectに、幅のプロパティを変更しました。上記のものから次のように変更しました。

<rect id="highlighted" style="width:w;" height="h" x="x" y="y" fill="rgba(0, 0, 0, .03)" stroke="none" />

そして、次の 2 つの操作を適用すると、clippath 機能が適切に動作します。

$('#clip_path_scroll_rect').attr('x', x).css('width', w);

$('#clip_path_scroll_rect').animate(
    {"width": w},
    {duration: 1,
    step: function(){
        this.setAttribute("x", x);
    }
});

これらのいずれかを削除すると、機能しなくなります。理由はわかりませんが、より良いものが登場するまでの一時的な修正である必要があります。回答は引き続き大歓迎です！

4

0 に答える 0