如何同时使用 Express 和 Ampersand？

Question

我正在创建一个 D3 应用程序，它将使用 Express 服务器和客户端的 A 符号显示一些简单的数据。最终，我想将数据动态发送到浏览器，因为整个数据集可能会变得非常大。不过，就目前而言，即使是最简单的事情，我也遇到了麻烦。

我已经设置了一个简单的 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 中；我只需要以某种方式发送等效数据。我不熟悉它，但我有一种预感，Ampersand 可以处理这些数据的 requesting/receiving，但我不确定如何处理。

Answer 1

对于这个特定示例，您不需要使用 & 号，事实上，我根本不会为这个特定问题使用它（而且我是 & 号作者）。

您要做的是从服务器加载 data.tsv 文件，并将数据导入 d3。通常，您会使用 ajax 请求（如您所确定的那样）从浏览器的服务器获取数据。事实上，d3 已经在为您做这件事。您正在调用的 d3.tsv 函数正在尝试从服务器加载 data.tsv 文件并为您解析它。

现在，出于某种原因，这显然不适合您，因此需要注意的事项：

如果您访问http://localhost:3000/data.tsv，您能在浏览器中看到数据吗？这将检查您是否具有 express + express 静态设置以正确提供数据。
如果您打开 d3.html 页面并打开您的浏览器开发者工具，您是否看到任何错误？

这段代码是您从服务器获取数据并解析它的地方。尝试将 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; })]);

除此之外，您还需要 post 更多的 d3 代码来帮助人们弄清楚发生了什么，以及为什么您得不到数据。您甚至可能希望将其标记为 d3 问题，并从标题中删除 & 符号，因为它可能与此处的问题无关。

旁注：很抱歉＆符号网站没有帮助。这些东西总是可以更好吧？ :)

如何同时使用 Express 和 Ampersand？

How do I use Express and Ampersand simultaneously?

javascript

node.js

express

d3.js

ampersand.js