0

外部のjsonファイルからデータを取得して折れ線グラフを取得しようとしていますが、

   <!DOCTYPE html>
  <meta charset="utf-8">
  <head>
   <style>

   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>
     <script src="http://d3js.org/d3.v3.js"></script>
      <script>

      var margin = {top: 20, right: 20, bottom: 30, left: 50},
      width = 960 - margin.left - margin.right,
      height = 500 - margin.top - margin.bottom;

       var parseDate = d3.time.format("%d-%b-%y").parse;

      var x = d3.time.scale()
     .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.date); })
        .y(function(d) { return y(d.close); });

       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 + ")");

        d3.json("data.json", function(error, data) {
        data.forEach(function(d) {
        d.date = parseDate(d.date);
        d.close = +d.close;
        });

        x.domain(d3.extent(data, function(d) { return d.date; }));
        y.domain(d3.extent(data, function(d) { return d.close; }));

        svg.append("g")
        .attr("class", "x axis")
        .attr("transform", "translate(0," + height + ")")
        .call(xAxis);

        svg.append("g")
        .attr("class", "y axis")
        .call(yAxis)
        .append("text")
        .attr("transform", "rotate(-90)")
        .attr("y", 6)
         .attr("dy", ".71em")
         .style("text-anchor", "end")
         .text("Price ($)");

          svg.append("path")
          .datum(data)
           .attr("class", "line")
           .attr("d", line);
          });

         </script>
         </body>
        </html>

data.json 内

   [
 {"date":"1-May-12","close":582.13},
{"date":"30-Apr-12","close":583.98},
{"date":"27-Apr-12","close":603.00},
{"date":"26-Apr-12","close":607.70},
{"date":"25-Apr-12","close":610.00},
{"date":"24-Apr-12","close":560.28}
  ]

Firefox と Safari では問題なく動作します。しかし、クロムではありません。次のエラーが表示されます。

XMLHttpRequest は ../Graphs/data.json を読み込めません。クロス オリジン リクエストは、HTTP でのみサポートされています。d3.v3.js:1878 xhr.send d3.v3.js:1878 xhr.(匿名関数) d3.v3.js:1864 d3_xhr d3.v3.js:1886 d3.json d3.v3.js:8954 (匿名関数)関数) graph.html:63

キャッチされていない TypeError: 未定義の graph.html:64 (無名関数) のメソッド 'forEach' を呼び出せません graph.html:64 イベント d3.v3.js:419 応答 d3.v3.js:1830 xhr.send d3.v3.js: 1878 xhr.(匿名関数) d3.v3.js:1864 d3_xhr d3.v3.js:1886 d3.json d3.v3.js:8954 (匿名関数) graph.html:63

Uncaught NetworkError: ネットワーク エラーが発生しました。d3.v3.js:1878 xhr.send d3.v3.js:1878 xhr.(匿名関数) d3.v3.js:1864 d3_xhr d3.v3.js:1886 d3.json d3.v3.js:8954 (匿名関数)関数）

誰が問題が何であるかを教えてもらえますか? ありがとう。

4

1 に答える 1