關於在node.js中服務html和繪圖的問題

當node.js服務包含svg繪圖的html文件時，我遇到了一個問題。關於在node.js中服務html和繪圖的問題

中的index.html包含圖表是等同於線圖在http://bl.ocks.org/mbostock/3883245

的問題是，每當我服通快遞服務器中的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繪製。

來源

2015-02-11 user3654736

你確定你的d3庫正在被你的瀏覽器加載嗎？ – 2015-02-11 11:55:50

是的。我確定。我雙擊F：\ d3 \ index.html並出現圖表。但瀏覽器在通過nodejs web服務器（127.0.0.1或localhost） – user3654736 2015-02-11 14:01:02

訪問時沒有顯示任何內容。您顯然不理解我的評論。你怎麼確定當你運行節點時d3.js被加載？ – 2015-02-11 14:03:43

我終於解決了這個問題。 node.js的服務器功能非常基礎。與IIS或Apache不同，節點不具有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圖表繪製成功顯示。

來源

2015-02-12 05:45:32 user3654736

關於在node.js中服務html和繪圖的問題

回答

相關問題