Question

我试图通过从外部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：无法调用方法＆＃39; forEach＆＃39;未定义的graph.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

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 （匿名函数）

任何人都可以告诉我问题是什么？感谢。

Answer 1

问题是因为您在服务器上运行此网页，但是您在本地运行它（可能在chrome中有c:\XXXX\page.html之类的路径。你必须向web服务器发出AJAX请求，否则chrome会阻止它。

所以你可以：

在本地网络服务器上设置您的页面
禁用Chrome安全性（Cross origin requests are only supported for HTTP but it's not cross-domain）

d3.js-铬错误

1 个答案: