CODEWITHSUNDEEP
xml-parsingd3.js
Pravin
Pravin

Reputation: 3311

XMLHttpRequest cannot load file?

d3.csv("result.csv", function(flights) {
    var nestByDate = d3.nest()
    .key(function(d) { return d3.time.day(d.date); });
    ..........

When I am trying to run above d3.js code from web server then it executes d3.js properly by loading csv file.

but when I am trying to run d3.js as shown below,

d3.csv("D:\\Project Space\\D3Demo\\WebContent\\result.csv", function(flights) {
    var nestByDate = d3.nest()
    .key(function(d) { return d3.time.day(d.date); });
    ..........

then it shows following error:

XMLHttpRequest cannot load file:///D:/Project%20Space/D3Demo/WebContent/result.csv. Cross origin requests are only supported for HTTP`

How to solve this problem ?

Upvotes: 0

Views: 3030

Answers (1)

ebolyen
ebolyen

Reputation: 966

There is no way to solve the problem using D3's convenience functions.

d3.csv fundamentally is an AJAX request and is beholden to the same-origin policy.

When you load the file location, your browser realizes that the requested file does not exist on the same domain (likely localhost in your case) and prevents the request from completing.

A simple way to get around this would be to simply serve the content over localhost or whatever you are using.

Alternatively you can look in to Cross-origin Resource Sharing, or for better compatibility: JSONP. In both of these cases you will likely have to roll your own function to convert the CSV data into a javascript array.

Upvotes: 2

Related Questions