score:1

Accepted answer

There are a few issues, namely, you don't define width or y for your rectangles. Also, the rectangle height should be equal to y(value) rather than height-y(value) (this is the top of the rectangle, and therefore the rectangle's y property, as svg coordinates start from the top at y=0). Your rectangle attributes should probably look more like:

  svg.selectAll('bar')
    .data(data)
    .enter()
    .append('rect')
    .style('fill', 'orange')
    .attr('x', (d)=>{
      return x(d.name)
    })
    .attr('height', (d)=>{
      return y(d.rank)
    })
    .attr("width",x.bandwidth())       
    .attr("y",(d)=>height - y(d.rank))
})

Second, you have inconsistent quotations in your transforms (svg and x axis appends respectively below):

   .attr('transform', 'translate(" + margin.left + "." + margin.top + ")');

   .attr('tranform', 'translate(0 " + height + ")')

Which is why these aren't being appended right, also you need commas between the two values.

Updated pen.


Related Query

More Query from same tag