2016-09-22 20 views
0

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は達成したいと説明していますが、基本的にはハードコードされています。 (つまり、今日がドメインに含まれている;)

+0

実行バージョンを提供できますか? –

+0

残念ながら。私はそれらを追加することができるので、私の投稿から何ビットが欠けていると思いますか? svgが実行され、すべてがスムーズに動作します。私はこの問題だけを持っています。 – flashjpr

+1

あなたの本当のドメインですか?それが2000年に始まり、終わることは分かりますか? –

答えて

0

問題がはDOMAINは私が渡していた日付に有効であるかどうかということを指摘し@GerardoFurtadoの助けにおかげで固定し、それが有効な出力を生成します (範囲内のインターバル)。

マイ極めて愚か間違いは、それが問題になる可能性があります私も、私はJS日付が0( - 0 1月)から開始することを考慮に入れたていなかったにもかかわらず、ということでした。

@GerardoFurtadoがドメインに有効な間隔を追加したとき、その線が正しく描画されています。

これは誰かへの使用であれば、私はまた、いつでもアプリが実行され、それがSタルトのO F D AY間の有効な間隔を持っていることが保証ビットが追加されます今日SタルトO F D 明日の AY。

​​

Here更新フィドルです。 @GerardoFurtadoと@Aravind Cheekkallurに感謝します。

誰もがこれを読むかもしれない場合は、お使いのINPUTがドメインに含まれていることを確認してください

関連する問題