Построение кругов svg на основе данных csv

Question

Я пытаюсь отобразить круги из данных в моем файле csv, но круги не отображаются на холсте SVG. Я считаю, что проблема связана с тем, как я загружаю данные (она загружается как массив объектов), но я не совсем уверен, как определить, что делать дальше.

Основе этого учебника: https://www.dashingd3js.com/svg-text-element

D3.js код:

 var circleData = d3.csv("files/data.csv", function (error, data) { 
      data.forEach(function (d) { 
       d['KCComment'] = +d['KCComment']; 
       d['pscoreResult'] = +d['pscoreResult']; 
       d['r'] = +d['r']; 
      }); 
      console.log(data); 
     }); 

     var svg = d3.select("body").append("svg") 
      .attr("width", 480) 
      .attr("height", 480); 

     var circles = svg.selectAll("circle") 
      .data(circleData) 
      .enter() 
      .append("circle"); 

     var circleAttributes = circles 
      .attr("cx", function (d) { return d.KCComment; }) 
      .attr("cy", function (d) { return d.pscoreResult; }) 
      .attr("r", function (d) { return d.r; }) 
      .style("fill", "green"); 

     var text = svg.selectAll("text") 
      .data(circleData) 
      .enter() 
      .append("text"); 

     var textLabels = text 
      .attr("x", function(d) { return d.KCComment; }) 
      .attr("y", function(d) { return d.pscoreResult; }) 
      .text(function (d) { return "(" + d.KCComment + ", " + d.pscoreResult + ")"; }) 
      .attr("font-family", "sans-serif") 
      .attr("font-size", "20px") 
      .attr("fill", "red"); 

Что CSV выглядит следующим образом:

fmname, fmtype, KCComment, pscoreResult, r 
test1, type1, 7.1, 8, 39 
test2, type2, 1.2, 3, 12 

Answer 1

Вы должны иметь круг волочения кода в d3.csv функция обратного вызова функции, поэтому она обрабатывается только тогда, когда данные доступны.

d3.csv("data.csv", function (error, circleData) { 
    circleData.forEach(function (d) { 
    d['KCComment'] = +d['KCComment']; 
    d['pscoreResult'] = +d['pscoreResult']; 
    d['r'] = +d['r']; 
    }); 
    console.log(circleData); 
    // Do the SVG drawing stuff 
    ... 
    // Finished 
}); 

Также отметим, что вместо установки var circleData = d3.csv( ... вы должны просто определить его в функцию обратного вызова.

Вот plunker с рабочим кодом: http://embed.plnkr.co/fzBX0o/preview

Вы сможете увидеть целый ряд дополнительных вопросов, в настоящее время: обе окружности накладываются друг на друга и только одна четверть видна. Это потому, что ваши KCComment и pscoreResult значения, используемые для определения окружностей cx и cy, слишком малы. Попробуйте их умножить так, чтобы круги перемещались вправо и вниз и немного более заметны! Я так же вернусь к текстам, но я оставлю эти проблемы для вас.