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;我只需要以某种方式发送等效数据。我不熟悉它，但我有预感，Ampersand可以处理请求/接收这些数据，但我不确定如何。

Answer 1

你不应该为这个特定的例子使用＆符号，事实上，我根本不会使用它来解决这个特定的问题（我是一个＆符号作者）。

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

现在，由于某些原因，这显然不适合你，所以要看一下：

如果您访问http://localhost:3000/data.tsv，是否可以在浏览器中看到数据？这会检查您是否有快速+快速静态设置以正确提供数据。
如果您打开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; })]);

除此之外，您还需要发布更多d3代码，以帮助人们弄清楚发生了什么，以及为什么您没有获取数据。您甚至可能希望将此标记为d3问题，并从标题中删除＆符号，因为它可能与您的问题无关。

旁注：道歉，＆符号网站没有帮助。这些东西总能更好吧？：）

如何同时使用Express和Ampersand？

1 个答案: