Question

我了解d3.JS已有更新，并且我一直在互联网和堆栈溢出方面寻求有关加载外部json或csv文件的指导。我修改了该函数以获取数据，但仍然收到2个错误：

错误1：无法加载API 错误2：未捕获（承诺）TypeError：无法获取

我不确定是什么原因造成的。我尝试了与其他帖子不同的修改，但是没有运气。任何帮助表示赞赏。

d3.csv('mydata.csv').then(function(data){

var canvas = d3.select('body').append('svg')
  .attr('width', 700)
  .attr('height', 700)

canvas.selectAll('rect')
   .data(data)
   .enter()
    .append('rect')
    .attr('width', function(d){
        return d.age * 10
    })
    .attr('height', 48)
    .attr('y', function(d, i){
        return i * 50
    })
    .attr('fill', 'orange')

canvas.selectAll('text')
  .data(data)
  .enter()
    .append('text')
    .attr('fill', 'blue')
    .attr('y', function(d, i){
        return i * 50 + 30
    })
    .text(function(d){
        return d.name
    })
})

Answer 1

确保您使用的是最新版本的D3 另外，如果您对CORS感到困惑，请尝试将数据文件上传到Github GIST，并使用原始URL到CSV数据文件。或者，如果您的数据位于其他服务器中，则可以尝试使用此https://cors-anywhere.herokuapp.com/，然后输入数据/ csv网址。

在此处查看使用代码和要点的示例

d3.csv('https://gist.githubusercontent.com/radaatyr/732f30394301fdc1384e9d109db428cb/raw/407167e7cc69036076945a9f1a02deafb5c26163/mydata.csv').then(function(data){

var canvas = d3.select('body').append('svg')
  .attr('width', 700)
  .attr('height', 700)

canvas.selectAll('rect')
   .data(data)
   .enter()
    .append('rect')
    .attr('width', function(d){
        return d.age * 10
    })
    .attr('height', 48)
    .attr('y', function(d, i){
        return i * 50
    })
    .attr('fill', 'orange')

canvas.selectAll('text')
  .data(data)
  .enter()
    .append('text')
    .attr('fill', 'blue')
    .attr('y', function(d, i){
        return i * 50 + 30
    })
    .text(function(d){
        return d.name
    })
})

<script src="https://d3js.org/d3.v5.min.js"></script>

提取API无法加载和捕获（承诺）TypeError：未能提取d3.js中的错误

1 个答案: