私はこれがなぜ起こっているのかよく分かりませんが、テキストをビジュアルと同期させるスクロールビジュアル(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();
}
}