谷歌电子表格 csv/json 文件的 D3 请求检索失败

Question

我很难让 Google 电子表格和 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
});

---

以下只是一个从 Google 电子表格中获取数据并将其转换为 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>

---