###前提・実現したいこと
ここに質問したいことを詳細に書いてください
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