Google电子表格CSV/JSON文件的D3-重新检索失败

Question

我很难制作Google电子表格和D3JS的D3-Request/d3-Request>标题通过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在这里

有什么想法绕过它？

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.init({
    key: key,
    callback: function (data, tabletop) {
        pie_chart(data, "#chart3");
    },
    simpleSheet: true
});

---

下面只是一个简单的示例，可以从Google电子表格中获取数据并将其转换为D3饼图。

//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>

---