D3請求檢索谷歌電子表格csv/json文件失敗

Question

我很難讓谷歌電子表格和D3js'D3-request/D3-request > header通過xhr請求一起工作。

我用下面的JS：

d3.request(url) 
    .header("X-Requested-With", "XMLHttpRequest") 
    .mimeType("text/csv") 
    .get(function(error, data) { 
     if (error) throw error; 
     console.log('request: '+ data); 
    }); 

我得到以下錯誤：

XMLHttpRequest cannot load https://docs.google.com/spreadsheets/d/e/2PACX-1vSZyV9olwK_hx0BRFgLtTz5hs_Z…mROYhax3VD9AFXTvmcataf8LuSIpxGT2/pub?gid=1023695213&single=true&output=csv. Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'https://fiddle.jshell.net' is therefore not allowed access. 

Jsfiddle here

任何想法繞過它？

Answer 1

使用D3僅

d3.json(url, function (error, result) { 
    var data = []; 
    for (i = 0; i < result.feed.entry.length; i += 1) { 
     data.push({ 
      "animal": result.feed.entry[i].gsx$animal.$t, 
      "population": result.feed.entry[i].gsx$population.$t 
     }); 
    } 
    pie_chart(data, "#chart1"); 
}); 

使用jQuery

$.get(url, function (result) { 
    var data = []; 
    $(result.feed.entry).each(function() { 
     data.push({"animal": this.gsx$animal.$t, "population": this.gsx$population.$t}); 
    }); 
    pie_chart(data, "#chart2"); 
}); 

使用tabletop。

Tabletop.init({ 
    key: key, 
    callback: function (data, tabletop) { 
     pie_chart(data, "#chart3"); 
    }, 
    simpleSheet: true 
}); 

---

以下僅僅是一個簡單的例子，從谷歌電子表格中獲取數據，並把它變成一個D3 pie chart。

//draws a pie chart with D3 
 
function pie_chart(data, id) { 
 
    var w = 400; 
 
    var h = 400; 
 
    var r = h/2; 
 
    var color = d3.scale.category20c(); 
 

 
    var vis = d3.select(id).append("svg:svg").data([data]).attr("width", w).attr("height", h).append("svg:g").attr("transform", "translate(" + r + "," + r + ")"); 
 
    var pie = d3.layout.pie().value(function (d) { 
 
     return d.population; 
 
    }); 
 
    var arc = d3.svg.arc().outerRadius(r); 
 

 
    var arcs = vis.selectAll("g.slice").data(pie).enter().append("svg:g").attr("class", "slice"); 
 
    arcs.append("svg:path") 
 
     .attr("fill", function (d, i) { 
 
      return color(i); 
 
     }) 
 
     .attr("d", function (d) { 
 
      return arc(d); 
 
     }); 
 

 
    arcs.append("svg:text").attr("transform", function (d) { 
 
     d.innerRadius = 0; 
 
     d.outerRadius = r; 
 
     return "translate(" + arc.centroid(d) + ")"; 
 
    }).attr("text-anchor", "middle").text(function (d, i) { 
 
     return data[i].animal; 
 
    }); 
 
} 
 

 
//the key of google spreadsheet 
 
var key = "1moczdbrfFwCp0L4Ube1a4GevuDcj2XQmCnpjArF_UEY"; 
 

 
//the url for jQuery and D3 
 
var url = "https://spreadsheets.google.com/feeds/list/" + key + "/od6/public/values?alt=json"; 
 

 
var i = 0; 
 

 
//D3 only 
 
d3.json(url, function (error, result) { 
 
    var data = []; 
 
    for (i = 0; i < result.feed.entry.length; i += 1) { 
 
     data.push({ 
 
      "animal": result.feed.entry[i].gsx$animal.$t, 
 
      "population": result.feed.entry[i].gsx$population.$t 
 
     }); 
 
    } 
 
    pie_chart(data, "#chart1"); 
 
}); 
 

 
//Jquery 
 
$.get(url, function (result) { 
 
    var data = []; 
 
    $(result.feed.entry).each(function() { 
 
     data.push({"animal": this.gsx$animal.$t, "population": this.gsx$population.$t}); 
 
    }); 
 
    pie_chart(data, "#chart2"); 
 
}); 
 

 
//tabletop 
 

 
Tabletop.init({ 
 
    key: key, 
 
    callback: function (data, tabletop) { 
 
     pie_chart(data, "#chart3"); 
 
    }, 
 
    simpleSheet: true 
 
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/tabletop.js/1.4.3/tabletop.js"></script> 
 

 
<div id="chart1" style="width: 480px; height: 400px;"><span>D3 only</span></div> 
 
<hr> 
 
<div id="chart2" style="width: 480px; height: 400px;"><span>Jquery</span></div> 
 
<hr> 
 
<div id="chart3" style="width: 480px; height: 400px;"><span>Tabletop</span></div>

---