D3では、このタイムラインのカスタマイズと追加に取り組んでいます。http://bl.ocks.org/rengel-de/5603464 by rengel Rengel最近、JSONデータセットからタイムライン上のすべてのイベントを表示する際に問題が発生していました。それは1970年から1953年にかけてのものではなく、1966年から1953年の間だけである。私のJSONファイルでYYYY-MM-DD値の比較を使用したD3タイムラインの作成
D3 Only Showing Partial Results from JSON
私の日付はYYYY-MM-DD形式である、と私はトラックを使用してタイムラインをレイアウトしています。この関数はこれらのトラックに要素を追加し、後の日付から前の日付の結果をソートします(下記のコードを参照)。しかし何らかの理由でJSONの結果を逆順に並べ替えると、日付は1966年に始まり、forward()の場合は反対側から半分(1958年)だけ開始されます。私は日付が正しく計算されていないので、これが起こっていると考えています。ここで
は、日付の各ペアをチェックするcompareDescending機能である:
function compareDescending(item1, item2) {
// Every item must have two fields: 'start' and 'end'.
// Read the dataset in and then compare the dates of the first value with the next value
var firstdatestartdesc = new Date(item1.DateStart);
var seconddatestartdesc = new Date(item2.DateStart);
// later first
var result = new Date(item1.DateStart) - new Date(item2.DateStart) ;
if (result < 0) { return 1; }
if (result > 0) { return -1; }
return 0;
var oneDay = 24*60*60*1000; // hours*minutes*seconds*milliseconds
var firstdatefinishdesc = new Date(item1.DateFinish);
var seconddatefinishdesc =new Date(item2.DateFinish);
result = new Date(item2.DateFinish) - new Date(item1.DateFinish);
if (result < 0) { return 1; }
if (result > 0) { return -1; }
return 0;
}
私はその後、calculateTracksを使用していてソートする機能:
function calculateTracks(item, sortOrder, timeOrder) {
var i, track;
sortOrder = sortOrder || "descending"; // "ascending", "descending"
timeOrder = timeOrder || "backward"; // "forward", "backward"
function sortBackward() {
// older items end deeper
data.projects.forEach(function (item) {/
for (i = 0, track = 0; i < tracks.length; i++, track++) {
if (item.DateFinish < tracks[i]) { break; }
}
item.track = track
tracks[track] = item.DateStart;
});
}
//won't need to use this when we have sort backward instead
function sortForward() {
// younger items end deeper
data.projects.forEach(function (item) {
for (i = 0, track = 0; i < tracks.length; i++, track++) {
if (item.DateStart > tracks[i]) { break; }
}
item.track = track;
tracks[track] = item.DateFinish;
});
}
if (sortOrder === "ascending")
data.projects.sort(compareAscending);
else
data.projects.sort(compareDescending);
if (timeOrder === "forward"){
;
sortForward();
}else{
sortBackward();
}
}
これをデバッグしている間、私は変更することがわかります"result"変数の値が異なるレイアウトを生成するので、それが適切に計算されていないと思うのです。ですから、私は日付を比較するための他の多くの方法を試しましたが、まだ運はありません。 (実際には、1970年代から1953年にかけて表示された矩形は、レーンで「積み重ねる」の代わりに、各矩形が前の矩形の下に追加されましたが、矩形は正しく積み重ねることなくx軸より下になりました。結果変数で試された:?。
var oneDay = 24*60*60*1000; // hours*minutes*seconds*milliseconds
var result = Math.round(firstdatestartdesc.getTime() - seconddatestartdesc.getTime());
var result = Math.round(Math.round(firstdatestartdesc - seconddatestartdesc)/(oneDay));
var result = Math.round((firstdatestartdesc - seconddatestartdesc)/(oneDay));
var result = Math.round((firstdatestartdesc - seconddatestartdesc)/(oneDay));
は、どのように私は長方形のすべてのデータセットを通じてのみ半分を開始する代わりに結果を表示するかもしれません事前に
おかげ
いくつかのデータを使って作業中のjsfiddleのコードを作成したら、私たちは皆について約束をすることができます – mgraham
https://jsfiddle.net/rootseire/t1vrbLc4/7/を作成しましたが、まだjsonオブジェクトをセットアップしていません。しかし、phpサービスへのリンクがあり、最初の10個の結果はd3.json呼び出しの上の変数に格納されています。私はそれを働かせることを試みることを試みるが、その間に助けることを望む。 – rootseire
@ rootseire-ありがとうございました。あなたは貧しいアドバイスを受けました。実行可能ファイルとしてここにコードをポストします。リンクは永遠に続くわけではなく、多くの人がリンクをたどりません。 'new Date(item1。) 'のように、Dateコンストラクタで文字列を解析することに注意してください。DateStart) 'は推奨されていませんが、手動で文字列を解析してください(ライブラリが役立つかもしれませんが、2行の関数で十分です)。 "YYYY-MM-DD"の文字列は、現在のブラウザではUTC、若干古いブラウザではローカル、それ以前は無効な日付として解析されます。 – RobG