关于在 node.js 中提供 html 和绘图的问题答案

【问题标题】：Issue about serving html and drawing in node.js关于在 node.js 中提供 html 和绘图的问题
【发布时间】：2015-02-11 06:33:11
【问题描述】：

当 node.js 提供一个包含 svg 绘图的 html 文件时，我遇到了一个问题。

index.html 包含一个与http://bl.ocks.org/mbostock/3883245 处的折线图相同的图表

问题是每当我通过 express 服务器提供 index.html 时，我都会得到一个空白页。（127.0.0.1:80 处的空白页）但是，如果我在本地打开 index.html 文件，则会出现折线图. （页面在 file:///F:/d3/index.html 处工作正常）

main.js 源码：

var app = require('express')();
var server = require('http').Server(app);
var fs = require('fs');

app.get('/', function(req, res){                  
    var index = fs.readFileSync(__dirname + '/index.html', "utf8");
    res.writeHead(200, {"Content-Type": "text/html"});
    res.write(index);
    res.end();
});

server.listen(80);

图表由d3绘制。

【问题讨论】：

您确定浏览器正在加载您的 d3 库吗？
是的。我相信。我双击 F:\d3\index.html 并出现图表。但是通过nodejs Web服务器（127.0.0.1或localhost）访问时浏览器什么也没显示
你显然不明白我的评论。当您通过节点运行时，您如何确定 d3.js 正在加载？
我确实将添加到
当你导航到127.0.0.1:80，得到一个空白页面，然后打开你的javascript控制台寻找错误；有什么错误？

标签： javascript html node.js express d3.js

【解决方案1】：

我终于解决了这个问题。 node.js 的服务器特性非常基础。与 IIS 或 Apache 不同，node 没有 Web 服务器的概念。每个文件请求都需要手动处理。

var app = require('express')();
var server = require('http').Server(app);
var fs = require('fs');

//load d3 for index.html
app.get('/d3/d3.js', function(req, res){
    var d3 = fs.readFileSync(__dirname + '/d3/d3.js', "utf8"); 
    res.writeHead(200, {"Content-Type": "application/javascript"});
    res.write(d3);
    res.end();
});

//load chart data for d3
app.get('/data.tsv', function(req, res){
    fs.readFile(__dirname + '/data.tsv', 'utf8', function(err, data){
        if (err){
            console.log(err);
        }else{
            console.log("data req received.")
            res.writeHead(200, {"Content-Type": "text/plain"});
            res.write(data);
            res.end();
        }
    });
});

app.get('/', function(req, res){
    res.sendFile(__dirname + '/index.html');
});

server.listen(80);

D3图表绘制成功。

【讨论】：