X軸上の現在の時刻を表す垂直線を自分のsvg上に置いておきたい。問題は、x1とx2座標が非常に間違っていることです。D3.jsタイムスケール上の現在の時点を表す垂直線
私のx軸はd3.time.scale()です。
var x = d3.time.scale()
.domain([new Date(2000, 0, 1, 0), new Date(2000, 0, 2, 0)])
.range([0, 1800]);
ここは私のxAxisですが、実際にはそれほど重要ではないと思います。
var xAxis = d3.svg.axis()
.scale(x)
.ticks(d3.time.minute, 60)
.tickFormat(d3.time.format("%H:%M"))
.orient("top");
私は本当に知っていると、このスケールは(公式D3のドキュメントで説明したように)、それはドメインからの範囲にマップしていることを意味し、何をするか理解しています。
私は縦線を描きたいとき、新しい日付を作成しています。 var today = new Date()
ですが、スケールに渡すと画面に表示されません。 私はそれが完全に間違っているのxによってマッピングされた今日の値がログインした場合:ここで作成し、行を追加するための私のコードは
console.log(today) results in Thu Sep 22 2016 10:26:09 GMT+0100 (GMT Daylight Time) - which is OK
console.log(x(today)) results in -51059.03733651621 - which is WRONG (i.e. it's not in range (0, width)
です。
svg.append("line")
.attr("class", "line")
.attr("x1", x(today))
.attr("y1", margin.top)
.attr("x2", x(today))
.attr("y2", height - margin.top - margin.bottom)
.style("stroke-width", 2)
.style("stroke", "red")
.style("fill", "none");`
私はスタックとGoogleで関連this related postとTBH、すべてを読んだことがある、とx(today)
は、関連する範囲にマップしていない理由はまだtが割れることができます。 また、私のドメインはの時間 - > 2000年であると考えていましたが、今日は2016年になり、それに応じてドメインを変更しましたが、まだマッピングが間違っています。
ご協力いただきありがとうございます。ありがとうございました !
編集:hereはうまくいきません。here is a fiddleは達成したいと説明していますが、基本的にはハードコードされています。 (つまり、今日がドメインに含まれている;)
実行バージョンを提供できますか? –
残念ながら。私はそれらを追加することができるので、私の投稿から何ビットが欠けていると思いますか? svgが実行され、すべてがスムーズに動作します。私はこの問題だけを持っています。 – flashjpr
あなたの本当のドメインですか?それが2000年に始まり、終わることは分かりますか? –