Javascript d3.js-chrome中的错误_Javascript_D3.js

Javascript d3.js-chrome中的错误

javascript d3.js

Javascript d3.js-chrome中的错误,javascript,d3.js,Javascript,D3.js,我试图通过从外部json文件中获取数据来获得一个折线图 <!DOCTYPE html> <meta charset="utf-8"> <head> <style> body { font: 10px sans-serif; } .axis path, .axis line { fill: none; stroke: #000; shape-rendering: cri

我试图通过从外部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>

它在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:无法调用未定义图形的方法“forEach”。html:64 （匿名函数）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

未捕获的网络错误：发生网络错误。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 （匿名函数）

有人能告诉我有什么问题吗？谢谢。

问题在于，您确实在服务器上运行此网页，但您是在本地运行的（可能在chrome中，您的路径类似于

c:\XXXX\page.html

）。您必须向Web服务器发出AJAX请求，否则chrome会阻止它

因此，您可以：

在本地Web服务器上设置页面

禁用chrome安全性（）

看见

   [
 {"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}
  ]