2017-03-05 14 views
1

D3用のEventDropsライブラリのnon-nodejバージョンを見つけました。このサンプルを自分のサーバーで再現できました。詳細とサンプルコードについては、このブログの投稿hereを参照してください。D3.jsのEventDrops(marmelabから) - サンプルコードを微調整する方法は?

は、しかし、誰かが正しい方向に私をかわすか、私が現在直面しています以下のような2つの問題のためのコードを私に提供してくださいできます。代わりにリアルタイム監視の

  1. を、私はロードしたいと思います表示する日付のあるCSVファイル。どうすればこれを達成できますか?
  2. もう1つ、グラフからエントリを覗き込むときに、どのようにして情報を表示することができますか?上記のリンクからのデモでは、限られた情報しか表示されませんが、私はCSVから複数の行をロードして、フーバーしながら表示したいと思います。元のEventDropsライブラリチームのexampleのように、nodejsは使用しません。

ありがとうございました。 CSVファイルには、以下の構造を持つことになります:1を指すように

明確化

name,date,comment 
google,"2017-03-06 17:00","some comment about the event" 
facebook,2017-02-15 11:13,"again a comment" 
google,"2017-01-01 12:13","older google event" 

Markは(hereを参照)一緒にいくつかのコードを入れてとても親切でした。しかし、私は上から私のCSVでこのコードを実行することができませんでした。誰かが私を助けてくれますか?ありがとう!あなたの最初のポイントのために

敬具、 ステファン

答えて

0

、あなたはCSVがPapaParseを使用して非常に簡単にはJavaScriptプレーンオブジェクトにファイルを変えることができます。あなたは、その後のようなもの使用してファイルをインポートすることができるだろう:あなたの2番目の質問について

const data = Papa.parse(csv); 

を、あなたは、各イベントにおける全体のデータ行へのアクセス権を持っています。例えば、EventDrops demoを参照して、インスタンスのために、経由で直接データにアクセスすることができます。まだホバリングについて

const chart = d3.chart.eventDrops() 
    .mouseover((row, index) => { 
     // if you need to access several rows, use data[index+1] for instance 
    }) 

、前に示したように、それは本当に些細なことではない、と手動でmouseovermouseoutイベントを処理する必要がありますデモリンク。

関連する問題