Ошибка с D3 data.map function

Я пытаюсь загрузить файл csv с координатами x и y и создать круги с этими координатами. Я понял, как загрузить файл csv, и я могу регистрировать координаты в консоли, но я не понимаю, почему функция журнала возвращает Not_a_number, когда я пытаюсь создать круги. Есть ли проблема с моей функцией data.map? БлагодаряОшибка с D3 data.map function

Вот код:

<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<script type="text/javascript" src="d3/d3.v3.js"></script> 
<style type="text/css"> 
    /* No style rules here yet */  
</style> 
</head> 
<body> 
<script type="text/javascript"> 

    //Width and height 
    var w = 900; 
    var h = 500; 
    var padding = 20; 
    var dataset = []; 

    d3.csv("dataset.csv", function(data) { 
     dataset = data.map(function(d,i) { 
     //THIS WORKS 
     console.log(d); 
     console.log(i); 
     return [ +d["x-coordinate"], +d["y-coordinate"] 
     ]; }); 


    //Create SVG element 
    var svg = d3.select("body") 
       .append("svg") 
       .attr("width", w) 
       .attr("height", h); 

    svg.selectAll("circle") 
     .data(dataset) 
     .enter() 
     .append("circle") 
     .attr("cx", function(d) { 
      //THIS DOESNT WORK 
      console.log(d); 
      return d[0]; 
     }) 
     .attr("cy", function(d) { 
      return d[1]; 
     }) 
     .attr("r", function(d) { 
      return d[1]; 
     }) 

    }); 

</script> 
</body> 
</html>

источник

2016-06-16 Art_Knopfler

Вы можете получить доступ только к dataset после его асинхронно загружается внутри d3.csv.

Код внутри d3.csv выполняется асинхронно, то есть он будет работать только после того, как был загружен файл, он не гарантирует выполнение перед кодом ниже него.

d3.csv("dataset.csv", function(data) { 
    dataset = data.map(function(d,i) { 
    //THIS WORKS 
    console.log(d); 
    console.log(i); 
    return [ +d["x-coordinate"], +d["y-coordinate"] 
    ]; }); 

    //Create SVG element 
    var svg = d3.select("body") 
       .append("svg") 
       .attr("width", w) 
       .attr("height", h); 

    svg.selectAll("circle") 
    .data(dataset) 
    .enter() 
    .append("circle") 
    .attr("cx", function(d) { 
      //THIS DOESNT WORK 
      console.log(d); 
      return d[0]; 
    }) 
    .attr("cy", function(d) { 
      return d[1]; 
    }) 
    .attr("r", function(d) { 
      return d[1]; 
    }) 
    .text("hello world"); 

});

В качестве альтернативы, создать метод и передать dataset в этот метод внутри d3.csv.

источник

2016-06-16 10:33:00 paradite

Я понимаю, спасибо за ответ, но теперь, когда я записываю координаты из «cx», он говорит, что Нан нравится, если он не имеет значения. Я предполагаю, что d [0] это не правильный способ выбрать атрибут элемента в наборе данных, но я не могу понять, как это сделать. –

попытайтесь выполнить регистрацию 'data' и' dataset' перед '// Create SVG element', и добавьте это к вопросу, я думаю, что у вас функция map имеет некоторые проблемы. – paradite

ладно спасибо, я изменил свой вопрос. Надеюсь, кто-то поможет! –

Ошибка с D3 data.map function

ответ

Смежные вопросы