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

未捕获的类型错误：无法调用未定义 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

2

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

这样你就可以：

  1. 在本地网络服务器上设置您的页面
  2. 禁用 chrome 安全性（仅 HTTP 支持跨源请求，但不支持跨域）
于 2013-08-22T11:50:28.233 回答