Добавленные полосы не будут отображаться на элементе svg

Попробуйте использовать следующее:

svg.selectAll('rect')
    .data(data)

Если вы используете svg.select, это сделает привязку данных только к первому найденному элементу.

d3.select(selector): Selects the first element that matches the specified selector string. If no elements match the selector, returns an empty selection. If multiple elements match the selector, only the first matching element (in document order) will be selected. For example, to select the first anchor element:

Это должно быть ясно, если вы проверите узлы DOM.

Чтобы решить эту проблему, давайте изменим некоторые вещи в вашем коде:

Давайте создадим фиктивную функцию выборки:

(function simulateCSVFetch() {
    const data = [1,2,3,4,5];
    generate(data);
})();

Вы также используете scaleBand с неполным доменом, используя функцию extent:

d3.extent(): Returns the minimum and maximum value in the given iterable using natural order. If the iterable contains no comparable values, returns [undefined, undefined]. An optional accessor function may be specified, which is equivalent to calling Array.from before computing the extent.

x_scale.domain(d3.extent(data, function(d) { // cant use extent since we are using a scaleBand, we need to pass the whole domain
   return d;
}));
console.info(x_scale.domain()) // [min, max]

Для scaleBand требуется сопоставление всего домена.

Band scales are typically used for bar charts with an ordinal or categorical dimension. The unknown value of a band scale is effectively undefined: they do not allow implicit domain construction.

Если мы продолжим использовать эту шкалу, мы получим только два значения для нашей шкалы x. Давайте исправим это с правильным доменом:

x_scale.domain(data);

Наконец, используйте selectAll для создания привязки данных:

 svg.selectAll('rect')
 .data(data)
 .enter()
 .append('rect')
 .attr('x', function(d, i) {
   return x_scale(d);
 })
 .attr('y', function(d) {
   return chart_h - y_scale(d); // fix y positioning
 })
 .attr('width', x_scale.bandwidth())

 .attr('height', function(d) {
   return y_scale(d);
 })
 .attr('fill', '#03658C');

Это должно сработать.

Полный код:

 var chart_w = 1000,
   chart_h = 500,
   chart_pad_x = 40,
   chart_pad_y = 20;

 var svg = d3
   .select('#chart')
   .append('svg')
   .style('background', '#f9f9f9')
   .style('border', '1px solid #cacaca')
   .attr('width', chart_w)
   .attr('height', chart_h);

 //Defining Scales
 var x_scale = d3.scaleBand()
   .range([chart_pad_x, chart_w - chart_pad_x])
   .padding(0.2);
 var y_scale = d3.scaleLinear()
   .range([chart_pad_y, chart_h - chart_pad_y]);

 //Data-------------------------------------------------------------------

 (function simulateCSVFetch() {
  const data = [1,2,3,4,5];
  generate(data);
 })();



 function generate(data) {
 console.info(d3.extent(data, function(d) { return d }));
   //Scale domains
   x_scale.domain(d3.extent(data, function(d) { // cant use extent since we are using a scaleBand, we need to pass the whole domain
     return d;
   }));
 // Band scales are typically used for bar charts with an ordinal or categorical dimension. The unknown value of a band scale is effectively undefined: they do not allow implicit domain construction.
   x_scale.domain(data);
   y_scale.domain([0, d3.max(data, function(d) {
     return d
   })]);

   //Create Bars
   svg.selectAll('rect')
     .data(data)
     .enter()
     .append('rect')
     .attr('x', function(d, i) {
       return x_scale(d);
     })
     .attr('y', function(d) {
       return chart_h - y_scale(d); // fix y positioning
     })
     .attr('width', x_scale.bandwidth())

     .attr('height', function(d) {
       return y_scale(d);
     })
     .attr('fill', '#03658C');
 }

Рабочий jsfiddle здесь