У меня проблема с отображением прямоугольников SVG

Question

Моя база данных Firestore сохраняется следующим образом: * Коллекция "test" * Документ "автоматически созданный Google ID" * Данные: 2 массива, 1 is month_name = [Январь, Февраль, Март,Апрель, май] [2] is ac_output = [20, 15, 5, 14, 3]

Мне удалось получить данные из базы данных, но ни один из прямоугольников не отображался в браузере.Затем я попытался показать один прямоугольник за раз, но все еще безуспешно.Я даже не получаю никакой ошибки на консоли, поэтому я не знаю, где проблема в моем коде.Мне действительно нужна помощь с этим.Спасибо

//Javascript Code:

//select the svg container
const svg = d3.select('.canvas')
  .append('svg')
    .attr('width', 600)
    .attr('height', 600);

//get data from the firestore
db.collection('test').get().then(res => {

  var data = [];
  res.docs.forEach(doc => {
        data.push(doc.data());
  });

//append data to the rects in the DOM
const rects = svg.selectAll('rect')
                .data(data);

//set the attributes for rects in DOM
  rects.attr('width', 50)
                .attr('height', function(...d) {
                                  return d[0].ac_output})
                .attr('fill', 'orange')
             .attr('x', (d, i) => i*70)

//append the enter selection to the DOM  
   rects.enter()
                .append('rect')
                  .attr('width',50)
                  .attr("height", function(...d) {
                               return(d[0].ac_output})                    
                  .attr('fill', 'orange')
})

Предполагается, что на данный момент ожидаемым результатом будет набор прямоугольников в браузере, который в конечном итоге превратится в гистограмму.

, если ясделать console.log (data), это изображение выводится:

Answer 1

Учитывая вашу структуру данных, которая по сути это ...

const data = [{
    ac_output: [10, 15, 20, 15, 5, 9],
    month_name: ["Jan", "Feb", "Mar", "Apr", "May", "Jun"]
}];

... проблема в том, что вы передаете массив с одним элементом методу data(). Мне кажется, что вы хотите передать значения в ac_outcome. В этом случае ваша привязка данных должна быть:

const rects = svg.selectAll('rect')
    .data(data[0].ac_output);

Кроме того, у вас есть две дополнительные проблемы:

1. Ваш ввод и обновление выбраны неверно. Если единственное значение, которое вы устанавливаете для изменения в последующих вызовах, это высота прямоугольника, это единственный атрибут, который вы должны сохранить при выборе обновления. Переместить все остальное в выбор ввода.

2. Здесь вы неправильно используете параметр rest. Во-первых, потому что привязка данных, которую мы уже охватили. Во-вторых, потому что это ...

   .attr("height", function(...d) {
   })
   

   ... передаст в качестве параметров массив с:

   а . данные; б . индекс; с . текущая группа;

   Поэтому для использования данных вы должны выполнить:

   .attr("height", function(...d) {
       //use d[0] here
   })
   

   Но это бесполезно, потому что вы можете просто сделать:

   .attr("height", function(d) {
       //use d here
   })
   

Вот ваш код с этими изменениями:

const svg = d3.select("svg");
const data = [{
  ac_output: [10, 15, 20, 15, 5, 9],
  month_name: ["Jan", "Feb", "Mar", "Apr", "May", "Jun"]
}];

const rects = svg.selectAll('rect')
  .data(data[0].ac_output);

rects.attr('height', function(d) {
  return d;
});

rects.enter()
  .append('rect')
  .attr('width', 50)
  .attr('x', (d, i) => i * 60)
  .attr("height", function(d) {
    return d
  })
  .attr('fill', 'orange')

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
<svg></svg>