Построение точек в D3. js - PullRequest
Новая
       58

Построение точек в D3. js

1 голос
/ 09 января 2020

Я получил доступ к API и сохранил данные в двух массивах. Теперь я пытаюсь нанести данные из массивов на график в D3. js. 


//Read the data
d3.json(BASE_URL).get(function(data) {
  console.log(data)

var data = data["near_earth_objects"]
console.log(data)
var today = [];
var neo = [];
var diameter = [];
var distance = [];
for (today of data["2020-01-09"]) {
console.log(today)

diameter.push(Math.round(today["estimated_diameter"]["feet"]["estimated_diameter_max"]))

for (approach of today["close_approach_data"]){
console.log(approach)
distance.push(Math.round(approach["miss_distance"]["lunar"]))
}
}

console.log(diameter)
console.log(distance)

Что будет X и Y - это массивы "диаметр" и "расстояние". 

    .selectAll("dot")
    .data(data)
    .enter()
    .append("circle")
      .attr("cx", function (d) { return x(d.distance); } )
      .attr("cy", function (d) { return y(d.diamter); } )
      .attr("r", 1.5)
      .style("fill", "#69b3a2")

Я пытался подключить переменные в cx и cy, но это не сработало! Мне удалось построить точки, если я читаю из CSV-файла, но сейчас читаю из json.

Очень новичок в программировании, поэтому любая помощь будет принята с благодарностью!

Вот что выкладывают мои console.logs. Два массива находятся внизу. Data samples

1 Ответ

1 голос
/ 10 января 2020

Есть две ошибки: когда вы рисуете круги, вы предполагаете, что data объект является массивом с элементами, которые содержат свойства «диаметр» и «расстояние»: 

svg.append('g')
    .selectAll("dot")
    .data(data)
    .enter()
    .append("circle")
      .attr("cx", function (d) { return x(d.distance); } )
      .attr("cy", function (d) { return y(d.diamter); } )

, но на самом деле вы используете исходный data объект со сложной структурой.

Итак, вы должны добавить что-то вроде этого: 

data2 = diameter.map(function(e,i){return {'diameter': e, 'distance':distance[i]}})

и изменить рендеринг вашего круга на data2: 

 svg.append('g')
    .selectAll("dot")
    .data(data2)
    .enter()
    .append("circle")
      .attr("cx", function (d) { return x(d.distance); } )
      .attr("cy", function (d) { return y(d.diameter); } )
      .attr("r", 3.5)
      .style("fill", "#69b3a2")

И вторая ошибка - «диаметр» вместо «диаметр» в .attr("cy", function (d) { return y(d.diamter); }

...