D3.jsの行に関連するデータを取得します

Question

この例をBostockに従えば、CSVファイルのデータを使用して行が作成されます。したがって、データは実際にd3.csv()機能を使用してロードされます。これらはすべて、かなり標準的な手順です。

私が苦労しているのは、データファイルからグローバル変数に再度ロードせずにx/y軸データセットを取得することです。私はdata()メソッドをラインパスに適用しようとしましたが、成功しなかったので、コンソールは単にArray [undefined]と言います。

これを達成するためにどのようなオプションが利用できますか？あなたの提案は高く評価されます。

Answer 1

この行に関連付けられたデータはundefinedではありません。私はd3.select("path")を使って線を選択したと思います。軸はSVGの前に塗られているので（軸はもちろん、dataはありません）、軸を選択します。だから、

、行を選択するには、単にそのクラスやIDを設定します。

g.append("path") 
    .datum(data) 
    .attr("id", "myLine") 

そしてゲッターとしてdata()を使用します。ここでは

console.log(d3.select("#myLine").data()) 

はbl.ocksで、コンソールをチェックし、データはそこにあります：https://bl.ocks.org/anonymous/e79769c5080a4618b00b946f722d7e39

d3.tsv以外の行に関連するデータを取得しようとしている場合は、は、SVGに線が塗りつぶされるまで待機し、したがってDOMに存在します。これはd3.tsv外にconsole.logで、setTimeoutを使用した例です。

setTimeout(()=>{console.log(d3.select("#myLine").data());}, 1000); 

とそれぞれbl.ocks：// BL：https://bl.ocks.org/anonymous/68ec8087514ff3335d81704796a9a944