Estoy tratando de hacer un gráfico de barras, pero no puedo encontrar una manera de hacer que la barra comience desde el punto 0 del eje y y no desde la parte inferior del svg. ¿Cómo puedo arreglar eso?
let url = "https://raw.githubusercontent.com/freeCodeCamp/ProjectReferenceData/master/GDP-data.json"; const padding = 50; const height = 460; const width = 900; var svg = d3.select('body') .append('svg') .attr('width', width) .attr('height', height); var arr = []; d3.json(url, function(data) { for (let i = 0; i < data.data.length; i++) arr[i] = data.data[i]; const yScale = d3.scaleLinear() .domain([0, d3.max(arr, (d) => d[1])]) .range([height - padding, padding]); const yAxis = d3.axisLeft(yScale); svg.append('g') .attr('transform', 'translate(' + padding + ', 0)') .call(yAxis) svg.selectAll('rect') .data(arr) .enter() .append('rect') .attr('fill', 'blue') .attr('height', d => d[1] + padding) .attr('width', 2.909090909090909) .attr('x', (d, i) => padding + (3.2 * i)) .attr('y', d => yScale(d[1])) .append('title') .text(d => d[1]) }); <script src="https://d3js.org/d3.v4.min.js"></script>Estás calculando incorrectamente la altura del rectángulo y no estás usando tu escala. También es más complicado ya que el uso del padding no es la convención típica de D3.
svg.selectAll('rect') .data(arr) .enter() .append('rect') .attr('fill', 'blue') .attr('height', d => height - padding - yScale(d[1]))