CODEWITHSUNDEEP
javascriptd3.js
London-35
London-35

Reputation: 85

How to add padding between bars and axis in d3?

I would like to place images between the axis labels and the axis line or the bars in my case. Now it's a bit tricky because I don't have much space. I am restricted by the graph size and I have to work with the current dimensions. I tried the option of adding tickPadding() to the y-axis but that meant I went over the graph size and the labels were cut-off. is there a way I could move the bars to the right? or make the width a bit smaller?

the current graph

here is my code for the y-axis and the bars:


    let yScale_h = d3.scaleBand()
      .range([0, height])
      .padding(0.2);


    let xScale_h = d3.scaleLinear()
      .range([0, width]);

    let yAxis = d3.axisLeft()
      .scale(yScale_h)
      .tickSize(0);

svg_bar.selectAll('rect')
      .data(dataset_performance, key)
      .enter()
      .append('rect')
      .attr("class", "bar")
      .attr('width', function (d) { return xScale_h(d.Award); })
      .attr('y', function (d) { return yScale_h(d.clean_test); })
      .attr('height', yScale_h.bandwidth())

Upvotes: 0

Views: 931

Answers (1)

Rodrigo Divino
Rodrigo Divino

Reputation: 1931

One way to manually offset the bars to the right is to reduce the scale range, and add the padding to the 'x' property of the bars.

This example adds a padding of 20px:

let xScale_h = d3.scaleLinear()

      .range([0, width - 20]); // Reduce the range by 20px

...

svg_bar.selectAll('rect')
      .data(dataset_performance, key)
      .enter()
      .append('rect')
      .attr("class", "bar")

      .attr('x', 20) // Move bars to the right by 20px

      .attr('width', function (d) { return xScale_h(d.Award); })
      .attr('y', function (d) { return yScale_h(d.clean_test); })
      .attr('height', yScale_h.bandwidth())

Upvotes: 1

Related Questions