Adjusting size of X/Y axis in D3

Adjusting size of X/Y axis in D3
0

#1

I’m working on the D3 GDP project and I’m most of the way done. I can’t figure out how to adjust the width of both the X and Y axes. The numbers on the vertical (Y) axis are cut off due to the axis not being wide enough. I’d also like to make the X access wider too so I can add a label.

It’s hard to find clear documentation on this online.


#2

I think what makes it hard to adjust the axes is because you hardcoded the 40 in their translate attributes. After I tried replacing them with margin.left, I was able to freely adjust the left and right margins and the graph adjusts nicely.

Somehow though, adjusting the right margin translates the bars downwards. The translate's Y part should be 0 instead of margin.right.

Cool effects btw!


#3

I’m not understanding exactly what you did. Can you show me how you did it?


#4

Ok, here are some diffs.

Around line 79:

          .style('box-shadow', '2px 2px 2px 1px rgba(0, 0, 0, .5)')
          .append('g')
          .attr('transform',
-               'translate(' + margin.left + ',' + margin.right + ')')
+               'translate(' + margin.left + ',0)')
          .selectAll('rect')
          .data(money)
          .enter().append('rect')

Around line 132:

      // Y axis guide
      yGuide = d3.select('#chart svg').append('g')
-       .attr('transform', 'translate(40,0)')
+       .attr('transform', 'translate(' + margin.left + ', 0)')
        .call(yAxisTicks)
        .style('stroke','#34495e')


      // X axis guide
      xGuide = d3.select('#chart svg').append('g')
-       .attr('transform', 'translate(40,' + height + ')')
+       .attr('transform', 'translate(' + margin.left + ', ' + height + ')')
        .call(xAxisTicks)
        .style('stroke','#34495e')

After you applied these changes you should be able to freely change your margin values without breaking your graph.

But somehow changing the top margin widens the bottom margin :thinking: