如何同时使用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中读取数据，我把它放在了我的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中；我只需要以某种方式发送等效的数据。我不熟悉它，但我有一种预感，Ampersand可以处理请求/接收这些数据，但我不确定如何处理。

Answer 1

您不应该在这个特定的例子中使用符号--实际上，我根本不会在这个特定的问题上使用它(而且我是一个符号和作者)。

您要做的是从服务器加载data.tsv文件，并将数据输入到d3。通常，您将使用ajax请求从浏览器中从服务器获取数据(如您所识别的)。事实上，d3已经为你做了这件事。您正在调用的d3.tsv函数试图从服务器加载data.tsv文件并为您解析它。

现在，由于某些原因，这显然不适用于您，所以需要考虑的是：

1. 如果您访问http://localhost:3000/data.tsv，您能在浏览器中看到数据吗？这将检查是否有express + express静态设置来正确地为数据服务。
2. 如果打开d3.html页面并打开浏览器开发工具，您是否看到任何错误？
3. 这段代码是从服务器获取数据并对其进行解析的地方。尝试将error记录到控制台，并检查developer日志以查看是否存在错误。也许d3正在努力获取或解析数据？您也可以记录这些数据，看看它在这一点上是否正确： d3.tsv("data.tsv"，类型，函数(错误，数据){console.log(“错误是：”，错误)；//添加这些console.log(“数据是：”，错误)；//两行x.domain(data.map(函数(D){返回d.letter；})；y.domain(0，d3.max(数据，函数(D){返回d.frequency；}))；
4. 除此之外，您还需要发布更多的d3代码，以帮助人们了解发生了什么，以及为什么您没有得到数据。您甚至可能希望将此标记为d3问题，并从标题中删除符号，因为它可能与您的问题无关。

附带注意:很抱歉，这个“符号”网站没有帮助。这些事情总是会更好的，是吗？