如何同時使用Express和Ampersand？

Question

我正在創建一個D3應用程序，該應用程序將使用Express服務器顯示一些簡單數據，並在客戶端使用Ampersand。最終，我會動態地將數據發送到瀏覽器，因爲整個數據集可能會變得非常大。儘管如此，即使是最簡單的工作，我也遇到了麻煩。

我已經建立了一個簡單的Express服務器，它是相當簡單：

// Boilerplate express code 
var express = require('express'); 
var app = express(); 
var path = require('path'); 

// Make the Public directory available to the browser 
app.use(express.static(__dirname + '/public')); 

app.get('/', function(req, res) { 
    res.sendFile('d3.html', {'root': path.join(__dirname, '/views') }); 
}); 

// Listen on port 3000 
app.listen(3000); 

這工作相當好。當我訪問該頁面時，它會加載一個空白的D3條形圖（僅軸），但不顯示任何數據。這是因爲我沒有將數據發送到瀏覽器，並且據我瞭解，這需要使用AJAX，jQuery或其他方法來完成。我不知道如何繼續這個。

這是在我的d3.html;它讀取data.tsv它的數據，我已經放在我的Express服務器的public文件夾：

d3.tsv("data.tsv", type, function(error, data) { 
    x.domain(data.map(function(d) { return d.letter; })); 
    y.domain([0, d3.max(data, function(d) { return d.frequency; })]); 

這是data.tsv：

letter frequency 
A .08167 
B .01492 
C .02782 
D .04253 
E .12702 
F .02288 
G .02015 
H .06094 
I .06966 
J .00153 
K .00772 
L .04025 
M .02406 
N .06749 
O .07507 
P .01929 
Q .00095 
R .05987 
S .06327 
T .09056 
U .02758 
V .00978 
W .02360 
X .00150 
Y .01974 
Z .00074 

如何將數據傳遞到瀏覽器這樣d3.html可以讀取數據？我不在乎數據是否在data.tsv;我只需要以某種方式發送相應的數據。我並不熟悉它，但我有一種直覺，即「和」可以處理請求/接收這些數據，但我不知道如何。

Answer 1

你不應該在這個特定的例子中使用＆符號，事實上，我根本不會使用它來解決這個特定的問題（我是一個＆符作者）。

你要做的是從服務器加載data.tsv文件，並將數據存入d3。通常情況下，您將通過ajax請求從瀏覽器中獲取數據（如您所識別的那樣）。事實上，D3已經在爲你做這件事了。你調用的d3.tsv函數試圖從服務器加載data.tsv文件併爲你解析它。

現在，這顯然不是爲你工作，出於某種原因，這樣的事情來看待：

1. 如果你訪問http://localhost:3000/data.tsv，你可以看到在你的瀏覽器中的數據？這將檢查您是否有快遞+快遞靜態設置以正確提供數據。

2. 如果您打開d3.html頁面並打開您的瀏覽器開發人員工具，您是否看到任何錯誤？

3. 此代碼是您從服務器獲取數據並解析數據的位置。嘗試將error記錄到控制檯，並檢查開發人員工具日誌以查看是否有錯誤。也許D3正在努力抓住或解析數據？您可以太日誌中的數據，看看它看起來是正確的，在這一點上：

   d3.tsv("data.tsv", type, function(error, data) { 
       console.log("The error is:", error); //add these 
       console.log("The data is:", error); //two lines 
       x.domain(data.map(function(d) { return d.letter; })); 
       y.domain([0, d3.max(data, function(d) { return d.frequency; })]); 
   

4. 除此之外，你需要發佈更多的你D3代碼，以幫助人們弄清楚是怎麼回事，爲什麼你沒有獲取數據。您甚至可能希望將此標記爲d3問題，並從標題中刪除＆符號，因爲它可能與您的問題無關。

附註：道歉，＆符網站是沒有幫助的。這些東西總是會更好吧？ :)