ScottLogic/d3-financial-components — pull request #106 by ColinEberhardt (2014-12-04 10:29:42+00:00)
Title: Adds axis containers and chart background

(Also fixes code style issues identified by @jleft https://github.com/ScottLogic/d3-financial-components/pull/104#issuecomment-65436328)

This change makes it easier to create a chart and add axes. Here's an example:

```
// Create the chartLayout (width and height not
![capture](https://cloud.githubusercontent.com/assets/1098110/5296824/61f45b4c-7ba0-11e4-9d78-01a1b83a4dfe.PNG)
set)
var chartLayout = fc.utilities.chartLayout();

// Setup the chart
var setupArea = d3.select('#financial-chart')
.call(chartLayout);

// create scales
var x = d3.scale.linear()
.domain([0, 100])
.range([chartLayout.innerWidth(), 0]);

var y = d3.scale.linear()
.domain([0, 100])
.range([chartLayout.innerHeight(), 0]);

// add axes
var bottomAxis = d3.svg.axis()
.scale(x)
.orient('bottom')
.ticks(5);
chartLayout.getAxisContainer(setupArea, 'bottom').call(bottomAxis);

var topAxis = d3.svg.axis()
.scale(x)
.orient('top')
.ticks(5);
chartLayout.getAxisContainer(setupArea, 'top').call(topAxis);

var leftAxis = d3.svg.axis()
.scale(y)
.orient('left')
.ticks(5);
chartLayout.getAxisContainer(setupArea, 'left').call(leftAxis);

var rightAxis = d3.svg.axis()
.scale(y)
.orient('right')
.ticks(5);
chartLayout.getAxisContainer(setupArea, 'right').call(rightAxis);
```

Which produces the following:

![capture](https://cloud.githubusercontent.com/assets/1098110/5296828/6cc119f2-7ba0-11e4-993e-1e7d33ba71a2.PNG)