Fetch API не может загрузить и Uncaught (в обещании) TypeError: не удалось получить ошибки в d3.js - PullRequest
Новая
       8

Fetch API не может загрузить и Uncaught (в обещании) TypeError: не удалось получить ошибки в d3.js

0 голосов
/ 01 ноября 2018

Я понимаю, что были обновления для d3.JS, и я ломал Интернет и переполнял стек для руководства по загрузке внешнего файла json или csv. Я изменил функцию для получения данных и все еще получаю 2 ошибки:

Ошибка 1: Fetch API не может загрузить Ошибка 2: Uncaught (в обещании) 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
    })
})

1 Ответ

0 голосов
/ 01 ноября 2018

Убедитесь, что вы используете последнюю версию D3 Также, если вы не уверены в CORS, попробуйте загрузить файл данных в Github GIST и использовать необработанный URL-адрес в файле данных CSV. Или, если ваши данные находятся на другом сервере, вы можете попробовать https://cors -anywhere.herokuapp.com / , а затем URL-адрес data / 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>
...