質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.51%
XML

XMLは仕様の1つで、マークアップ言語群を構築するために使われています。

D3.js

D3.jsとは、データに基づいてHTMLやSVGドキュメントを編集するために作られた、小規模なオープンソースのJavaScript可視化ライブラリです。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

1回答

447閲覧

JavaScriptを使ってxmlファイルを読み込み、正規分布グラフにする方法

hidetakahashi

総合スコア6

XML

XMLは仕様の1つで、マークアップ言語群を構築するために使われています。

D3.js

D3.jsとは、データに基づいてHTMLやSVGドキュメントを編集するために作られた、小規模なオープンソースのJavaScript可視化ライブラリです。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0グッド

0クリップ

投稿2017/11/08 05:55

編集2022/01/12 10:55

###前提・実現したいこと
ここに質問したいことを詳細に書いてください

javascriptでxmlファイルを読み込んで、d3.jsを使って、正規分布のグラフが書きたいのですが、どのように書けばよろしいでしょうか?

###発生している問題・エラーメッセージ

ReferenceError: data is not defined

エラーメッセージ ReferenceError: data is not defined

###該当のソースコード

javascript [normal distribution_test.html] ここにご自身が実行したソースコードを書いてください
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <title>Normal Plot</title> <meta name="description" content=""> <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script> <script type="text/javascript" src="d3.js"></script> <style type="text/css"> body { font: 10px sans-serif; } .axis path, .axis line { fill: none; stroke: #000; shape-rendering: crispEdges; } /*.x.axis path { display: none; }*/ .line { fill: none; stroke: steelblue; stroke-width: 1.5px; } </style> </head> <body> <form action="/cgi-bin/demo.py" method="POST"> </form> <script type="text/javascript"> //setting up empty data array d3.xml("normal distribution.xml",function(error,xmlRoot){ var xmlData = xmlRoot.querySelectorAll("datalist"); var salesRoot = xmlData[0]; var salesData = salesRoot.querySelectorAll("name"); var arrData= []; for( var i=0 ; i < salesData.length ; i++){ var d = salesData[i].firstChild.nodeValue; arrData.push( d ); } }); // line chart based on http://bl.ocks.org/mbostock/3883245 var margin = { top: 20, right: 20, bottom: 30, left: 50 }, width = 960 - margin.left - margin.right, height = 500 - margin.top - margin.bottom; var x = d3.scale.linear() .range([0, width]); var y = d3.scale.linear() .range([height, 0]); var xAxis = d3.svg.axis() .scale(x) .orient("bottom"); var yAxis = d3.svg.axis() .scale(y) .orient("left"); var line = d3.svg.line() .x(function(d) { return x(d.q); }) .y(function(d) { return y(d.p); }); var svg = d3.select("body").append("svg") .attr("width", width + margin.left + margin.right) .attr("height", height + margin.top + margin.bottom) .append("g") .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); x.domain(d3.extent(data, function(d) { return d.q; })); y.domain(d3.extent(data, function(d) { return d.p; })); svg.append("g") .attr("class", "x axis") .attr("transform", "translate(0," + height + ")") .call(xAxis); svg.append("g") .attr("class", "y axis") .call(yAxis); svg.append("path") .datum(data) .attr("class", "line") .attr("d", line); function getData() { // loop to populate data array with // probabily - quantile pairs q = normal(d)// calc random draw from normal dist p = gaussian(q)// calc prob of rand draw el = { "q":q, "p":p } data.push(el) }; // need to sort for plotting //https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort data.sort(function(x, y) { return x.q - y.q; }); // from http://bl.ocks.org/mbostock/4349187 // Sample from a normal distribution with mean 0, stddev 1. function normal() { var x = 0, y = 0, rds, c; do { x = Math.random() * 2 - 1; y = Math.random() * 2 - 1; rds = x * x + y * y; } while (rds == 0 || rds > 1); c = Math.sqrt(-2 * Math.log(rds) / rds); // Box-Muller transform return x * c; // throw away extra sample y * c } //taken from Jason Davies science library // https://github.com/jasondavies/science.js/ function gaussian(x) { var gaussianConstant = 1 / Math.sqrt(2 * Math.PI), mean = 0, sigma = 1; x = (x - mean) / sigma; return gaussianConstant * Math.exp(-.5 * x * x) / sigma; }; </script> </body> </html>

読み込もうしているxmlファイル

xml [normal distribution.xml] ここにご自身が実行したソースコードを書いてください
<?xml version="1.0" encoding="utf-8" ?> <datalist> <data> <name>1</name><mean>0</mean> </data> </datalist>
###試したこと 課題に対してアプローチしたことを記載してください dataが定義されていないという事でarrDataに変えたりしましが、同じように定義されていないとでます。 ###補足情報(言語/FW/ツール等のバージョンなど) "http://d3js.org/d3.v3.min.js"と"d3.js"を読み込んでいます。 そちらは、ちゃんと読み込めているので、問題ないかと思います。 より詳細な情報 元々、下記の部分が、
d3.xml("normal distribution.xml",function(error,xmlRoot){ var xmlData = xmlRoot.querySelectorAll("datalist"); var salesRoot = xmlData[0]; var salesData = salesRoot.querySelectorAll("name"); var arrData= []; for( var i=0 ; i < salesData.length ; i++){ var d = salesData[i].firstChild.nodeValue; arrData.push( d ); } });
ではなく、 この下記の部分でした。(これならグラフが出ます。)
var data = []; getData(); // popuate data

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

kei344

2017/11/08 06:25

質問文のコードはそれぞれコードブロックで囲んでいただけませんか? ```(バッククオート3つ)で囲み、前後に改行をいれるか、コードを選択して「<code>」ボタンを押すとコードブロックになります。
hidetakahashi

2017/11/08 06:38

承知しました。申し訳ありません。修正して、もう一度、投稿します。
kei344

2017/11/08 06:40

質問は編集することが出来るので、再投稿はしないでください。
kei344

2017/11/08 06:46

PCであれば記入エリアの右部分あたりにリアルタイムに結果が表示されていると思うので、そこを見ながら調整してください。
hidetakahashi

2017/11/08 06:47

何度も申し訳ありません。修正致しましたので、よろしくお願い致します。
guest

回答1

0

こうかな。

JavaScript

1var data = []; 2d3.xml("normal distribution.xml",function(error,xmlRoot){ 3 4 var xmlData = xmlRoot.querySelectorAll("datalist"); 5 var salesRoot = xmlData[0]; 6 var salesData = salesRoot.querySelectorAll("name"); 7 var arrData= []; 8 9 for( var i=0 ; i < salesData.length ; i++){ 10 var d = salesData[i].firstChild.nodeValue; 11 arrData.push( d ); 12 } 13 data = arrData; 14 getData(); // popuate data 15});

投稿2017/11/08 08:31

kei344

総合スコア69357

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

hidetakahashi

2017/11/08 08:48

ありがとうございます。一度、試してみます。
hidetakahashi

2017/11/08 09:19

試したのですが、 ReferenceError: d is not definedと出てしまいます。 すいません。もう一度、考えてみます。
hidetakahashi

2017/11/08 09:52

確認してみます。ありがとうございます。
hidetakahashi

2017/11/08 10:03

う~ん、試してみると、 ReferenceError: salesData is not definedって出ますね。 もうちょっと調べてみます。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.51%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問