2017-06-15 94 views
1

我正在使用d3.queue在繪製可視化文件之前加載兩個不同的資源。解析d3.queue中的資源

如果資源不需要被解析,任務可以很容易地實現:

d3.queue() 
    .defer(d3.text, 'file1.txt') 
    .defer(d3.json, 'file2.json') 
    .await(draw); 

現在,假設file.txt具有以下結構:

STATE|STUSAB|STATE_NAME|STATENS 
01|AL|Alabama|01779775 
02|AK|Alaska|01785533 
04|AZ|Arizona|01779777 

我知道我可以使用d3.dsvFormat('|')來解析這個文件,但我怎麼能在隊列中做到這一點?

這裏是一個JSFiddle

我使用的文件可以在這裏找到:National FIPS and GNIS Codes File

回答

0

我看了一下d3-request的代碼,我實現了一個加載和分析管道分隔的.txt文件的函數。它基本上與json.js的代碼相同。

import * as d3RequestType from '../../node_modules/d3-request/src/type'; 

const d3Psv = d3RequestType.default('text/plain', (xhr) => { 
    const psv = d3.dsvFormat('|'); 
    return psv.parse(xhr.responseText); 
}); 

const queue = d3.queue(); 
queue 
    .defer(d3Psv, 'file1.txt') 
    .defer(d3.json, 'file2.json') 
    .await(draw); 

在另一個項目中,我不得不加載一個文件,其中的值用分號隔開,我使用了相同的方法。

請注意,您也可以傳遞一個rowFunction作爲psv.parse的第二個參數。

1

你不能這樣做,解析在遞延負責像你這樣如對於d3.json,因爲沒有方便的方法來一次請求和解析你的內容。處理分隔符分隔值時,D3僅爲逗號(d3.csv)和製表符(d3.tsv)提供了便捷方法。這些將請求資源在一次運行中解析內容。然後將使用已解析的內容調用await回調。

由於您正在使用不同的分隔符,即管道"|"字符,您將不得不一個接一個地執行這兩個步驟。在隊列中,您仍然可以使用d3.text來請求文件的文本內容。但是,解析必須通過使用d3.dsvFormat("|").parseawait回調中完成。必要的部分已包含在您的代碼中;你只需要使用psv做解析您的draw()功能:

const psv = d3.dsvFormat('|'); 

const draw = (error, data1, data2) => { 
    console.log(psv.parse(data1));   // Do the parsing in await 
    console.log(data2); 
} 

const queue = d3.queue(); 
queue 
    .defer(d3.text, url1)     // Load textual contents 
    .defer(d3.json, url2) 
    .await(draw); 

看一看更新JSFiddle的工作示例。