D3.js＋Socket.IO＋Node.js

クライアント側をD3.jsのライブラリで
サーバ側をNode.jsで作成しようとしています．

D3.jsでJson形式を読み込んで作業していますが，Json形式の中身を
プログラムで書き換えるときにローカルではできないと知り，
Node.jsのfsモジュールを使いJson形式の中身を変更しようとしています．

しかし，コンソールでnode ○○.jsを実行し，localhost:○○○○へつなぐと，

Uncaught SyntaxError: Unexpected token <
(index):75 Uncaught ReferenceError: d3 is not defined

とエラーが出てしまいます．
クライアント側にD3.jsのライブラリを含むとNode.jsがうまく機能できないのでしょうか．
双方向通信にはSocket.IOを使用しています．

###環境
クライアント側
JavaScript
|
socket.io
D3.js-------------JSON形式

サーバ側
node.js v5.2.0

###補足
ブラウザの環境はfirefoxですがChromeでも同様でした．
エラー詳細は

SyntaxError: expected expression, got '<'
 d3.v3.js:1:0

ReferenceError: d3 is not defined
 localhost:○○○○:75:5

それぞれ

<!DOCTYPE html>

var svg = d3.select("body").append("svg")

ということでした．
###Javascript

<script src="d3.v3.js"></script>
<script src="/socket.io/socket.io.js"></script>
・
・
・
//ボタンを押すとサーバに接続
d3.select("#○○○○").on("click", function() {
	//データの取得
	var 1_generate = document.getElementById("＊＊").value;
	var 2_generate = document.getElementById("＋＋").value;

	// サーバーに接続
	var ioSocket = io.connect();

	// クライアントからサーバーへ送信
        ioSocket.emit( "1_generate", 1_generate );
	ioSocket.emit( "2_generate", 2_generate );

})

###node.js
モジュールは

var fs = require('fs');
var http =require('http');
var server = http.createServer();
var io = require('socket.io').listen(server);

を使っています．
ファイル操作(fs)モジュールを使ってNode.jsからJson形式へ書き出しているようにしています．

###参照教科書
amazonにつながりますが，これを見ています
はじめてのNode.js
JS+Node.jsによるWebクローラー/ネットエージェント開発テクニック
 Node.jsの教科書

行動規範の内容に同意します

回答1件

(index):75 Uncaught ReferenceError: d3 is not defined

エラーはd3が未定義と言っています。
d3のモジュールをロードしていない可能性はないでしょうか？

javascript
1var d3 = require("d3");

下記のサイトではnodeを使ってサーバサイドでSVGを生成しています。
参考になるかもしれません。

【node.js+D3.js】サーバーサイドD3

投稿2016/01/05 11:11

bleurouge

総合スコア161

nano-dia

2016/01/05 11:36

回答ありがとうございます．「【node.js+D3.js】サーバーサイドD3」も参考にしてみましたが， var d3 = require("d3");を追加してもエラーは変わりませんでした． npm install d3はしています

bleurouge

2016/01/05 12:19

確認です。・チャートなど図表を描画（d3でのSVGの作成）はクライアント側のブラウザで行う。・node側ではJSONの整形を行い、さらにwebサーバとしてhtmlを返す。SVGタグはnode側で作成しない。ということでよろしいでしょうか？上記が要件であれば、npmによるnodeへのd3モジュールのインストールも、requireでのモジュールのロードも不要です。エラーは、それぞれブラウザのコンソールに出るエラーということでしょうか？nodejs側のエラーでしょうか？【SyntaxError: expected expression, got '<' 】 nodeのjavascript内に"<!DOCTYPE html>"があり、 < (javascriptの演算子) として解釈されて出ているエラーかも？【(index):75 Uncaught ReferenceError: d3 is not defined】 nodeからブラウザに渡しているHTML（publicフォルダ内のHTML）でd3.jsをロードしていないから？CDNからスクリプトタグでd3.jsをhtmlにロードしてみてください。 <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.12/d3.js"></script> ※私の回答にあるリンクはサーバサイド（node.js側）でSVGタグの作成を行おうとするものです。node側の処理がJSONの整形だけであれば、参考になりません。

nano-dia

2016/01/05 13:07

>>確認です。 >>・チャートなど図表を描画（d3でのSVGの作成）はクライアント側のブラウザで行う。 >>・node側ではJSONの整形を行い、さらにwebサーバとしてhtmlを返す。SVGタグはnode側で作成しない。 >>ということでよろしいでしょうか？はい仰る通りです．クライアント側でボタンを追加し，ボタンをおすことでnode側でJSONの整形を行いたいと考えています．その後，クライアント側でJSON形式を更新します． >>エラーは、それぞれブラウザのコンソールに出るエラーということでしょうか？nodejs側のエラーでしょうか？ Webブラウザでhttp://localhost:○○○○に接続した時のコンソールに出るエラーです．エラーが指しているのはクライアント側で書いたのが表示されています．クライアント側では<script src="d3.v3.js"></script>をしているので，urlが.htmlではD3.jsは正常に描画されます．ですが，http://localhost:○○○○では，D3.jsでの描画がされなくなります．

bleurouge

2016/01/05 18:20

返信いただいた内容から、node.jsのjavascript内にhtmlの<script>タグを書いていることが【< のエラー】と【d3.v3.jsをロードできないエラー】の原因だと考えられます。 javascriptのstring内にhtmlのscriptタグをそのまま書くことはできません。書く場合はエスケープする必要があります。 ※npm install connect　で connectミドルウェアを入れる必要あり。 === app.js === var connectMid, server, http = require('http'), connect = require('connect'), app = connect(), html = '<!doctype html>' + '<html>' + '<head>' + '\x3Cscript>' + 'var str = \'\x3Cscript src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.12/d3.js">\'+\'\x3C/scr\'\+\'ipt>\';' + 'document.write(str);' + '\x3C/script>' + '</head>' + '<body>HTML BODY</body>' + '</html>'; connectMid = function (request, response, next) { response.setHeader('content-length', html.length); response.end(html); }; app.use(connectMid); server = http.createServer(app); server.listen(3000); ====== また、エスケープしてかつ、document.writeで書き出してあげる必要があるため現実的ではありません。node.jsでhtmlを扱う場合は、expressというフレームワークを利用することが多いです。expressの利用をおすすめします。ドットインストール　Express入門 (全21回) http://dotinstall.com/lessons/basic_expressjs

nano-dia

2016/01/07 07:22

まだ，Node.jsを勉強足らずですみません． >>返信いただいた内容から、node.jsのjavascript内にhtmlの<script>タグを書いていることが【< のエラー】と【d3.v3.jsをロードできないエラー】の原因だと考えられます。 >>javascriptのstring内にhtmlのscriptタグをそのまま書くことはできません。書く場合はエスケープする必要があります。 node.jsのjavascript内にはhtmlの<script>タグは書いておりません．クライアント側で書いたのがエラーとして指されている状態です．

bleurouge

2016/01/08 06:05

追加情報で、少し気になった点があります。 javascript(.jsファイル)内にスクリプトタグを書いている可能性はないですか？ node.js socket.io d3.jsとは直接関係ありませんが、同じようなエラーが出ているケースがありました。 SyntaxError: expected expression, got '<', what does that mean? http://stackoverflow.com/questions/31926326/ ＞1)SyntaxError: expected expression, got '<' ＞2)ReferenceError: change is not defined <script>・・・</script>はHTML内で使います。javascript（.js）内では使えません。 ========== HTML ： <script src="d3.v3.js"></script> <script src="/socket.io/socket.io.js"></script> <script src="/js/yourscript.js"></script> ： ========== yourscript.js（nano-diaさん作成のJS） //<script src="d3.v3.js"></script>　←削除 //<script src="/socket.io/socket.io.js"></script>　←削除 //ボタンを押すとサーバに接続 d3.select("#○○○○").on("click", function() { ：

行動規範の内容に同意します