гистограммы d3-узла отображаются неправильно

Question

Я новичок в этом. Я пытаюсь создать простую панель инструментов для веб-приложения и рассмотрел d3. Я понимаю зависимость d3 от HTML и, следовательно, я установил d3-узел и даже прошел мини-курс через Udemy.

Это мой код:

app.get('/dashboard', function(req, res){

var chart_width = 800;
var chart_height = 400;
var bar_padding = 5;
const svg =  d3n.createSVG(chart_width, chart_height)

              .append('rect')
              .attr('width',25)
              .attr('height', 100);
  //bind data and create bars
  svg.selectAll('rect')
     .data(data)
     .enter()
     .append('rect')
     //generate the x coordinate dynamically
     .attr('x', function(d, i){
       return i * (chart_width / data.length); //
     })
     .attr('y',function(d){
       return chart_height - d * 5
     })
     .attr('width', chart_width / data.length - bar_padding)
     .attr('height', function(d){
       return d * 5;
     })
     .attr('fill', '#7ED26D');
  res.end(d3n.svgString())

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

Это то, что отображает мой браузер:

У меня есть намного больше вопросы, и, к сожалению, очень мало документации, касающейся d3 и конкретного узла.