2017-07-13 5 views
1

私はこれがなぜ起こっているのかよく分かりませんが、テキストをビジュアルと同期させるスクロールビジュアル(https://jhjanicki.github.io/hongmutrade_v2/)を作成しました。視覚化、フォースグラフは "洪蒙家は保護されていますか?"中国地図は「需要と供給国」などと同期する必要があります。スクロールビジュアリゼーションは、ページを2回ロードするとテキストまで同期するだけです

私は、特定のものを表示させたいテキストにクラス「セクション」を割り当てます。

var topArray = []; 
    $(".section").each(function() { 
     var hT = $(this).offset().top; 
     var hH = $(this).outerHeight(); 
     var wH = $(window).height(); 
     topArray.push(hT+hH-wH); 
    }); 

Trigger event when user scroll to specific element - with jQueryから)ターゲットにユーザーがスクロールが、それは特定の視覚化をトリガしたときに表示されるように:私は以下のような配列にこれらの高さを格納します。

if (scrollTop > topArray[1]){ 
      d3.selectAll(".stat2") 
        .transition() 
        .duration(100) 
        .style('opacity',0); 
      d3.selectAll(".stat3") 
        .transition() 
        .duration(100) 
        .style('opacity',1); 

     }else{ 
      d3.selectAll(".stat3") 
        .transition() 
        .duration(100) 
        .style('opacity',0); 

     } 

私はgithubの、私は視覚化が同期していそれを読み込む初めての分岐GH-ページを作成するとき、彼らはあまりにも速く前進するが、私はリフレッシュをクリックするならば、彼らが同期します。なぜこれが起こっているのかかなり混乱しています。
2つの異なるブラウザ(ChromeとFirefox)を搭載した2台の異なるコンピュータで既にテストしました。ローカルでも同じ問題があります。

すべてのヘルプは、私は一度リロードするページを強制的にこのコードを追加した場合、それは動作しますが、例えば

をいただければ幸いです。

window.onload = function(){ 
    if(!window.location.hash){ 
    window.location = window.location + '#loaded'; 
    window.location.reload(); 
    } 
} 

答えて

2

DOMが完全にロードされる前に、あなたのスクリプトが実行され、したがって、$(window).height()またはwindow.innerHeightのような対策は間違っています。

ページがリロードされる理由は、ページをリロードするときに、スタイルやWebフォントなどのリソースがブラウザのキャッシュに既に用意されているためです。

ソリューション:

は、またjQuery ready function's callback

$(function() { 
// move code here 
}) 

内のスクリプト(index.htmlの底に1)をラップ<head>のすべて<script>外を移動し、ちょうどあなたのスクリプトの上にそれらを置きます。

関連する問題