按照Bostock的示例,該行是使用CSV文件中的數據創建的。所以,數據實際上是使用d3.csv()
函數加載的。這些都是相當標準的步驟。獲取與D3.js中的某一行相關的數據
我在掙扎的是獲取x/y軸數據集,而不再從數據文件加載到全局變量。我嘗試將data()
方法應用於線路,但沒有成功,控制檯簡單地說Array [undefined]
。
有什麼選擇/方法可以實現這個目標?您的建議將受到高度讚賞。
按照Bostock的示例,該行是使用CSV文件中的數據創建的。所以,數據實際上是使用d3.csv()
函數加載的。這些都是相當標準的步驟。獲取與D3.js中的某一行相關的數據
我在掙扎的是獲取x/y軸數據集,而不再從數據文件加載到全局變量。我嘗試將data()
方法應用於線路,但沒有成功,控制檯簡單地說Array [undefined]
。
有什麼選擇/方法可以實現這個目標?您的建議將受到高度讚賞。
與該行關聯的數據不是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中。這是使用setTimeout
一個例子,與外部d3.tsv
的執行console.log:
setTimeout(()=>{console.log(d3.select("#myLine").data());}, 1000);
和各自bl.ocks:https://bl.ocks.org/anonymous/68ec8087514ff3335d81704796a9a944
非常感謝您的解釋。 'setTimeout()'函數確實有效。更有趣的是,無論毫秒參數是「0.00005」,還是「1」或「1000」,它都可以工作。這讓我想知道是否有一種方法可以確定「該行是在SVG中繪製的,因此存在於DOM中」。 – Xavier
是的,三個是:在回調結束時放置一個'console.timeEnd'。 –
你可以包括你的代碼 – Craicerjack
相同的代碼,博斯托克的例子(https://開頭BL .ocks.org/mbostock/3883245),但文件不在CSV文件中。 – Xavier
如果你只是使用該塊的代碼,並簡單地將方法更改爲csv,那麼我沒有看到它的問題,除非你沒有改變數據爲CSV(逗號分隔與製表符分隔) – Craicerjack