Simple Axis Tutorial Part 2

Add Margins

create object to hold margin information

var margin = {top: 100, bottom: 100, right: 100, left: 50};

set up variables for width and height of chart
```
var width = 800;
var height = 600;
```

create variables for svg width and height

var svgWidth = 800 + margin.right + margin.left;
var svgHeight = 600 + margin.top + margin.bottom;

replace numbers in svg viewport with variables

 var svg = d3.select("body").append("svg")
   .attr("width", svgWidth)
   .attr("height", svgHeight);

append group and translate viewport position

  var svg = d3.select("body").append("svg")
      .attr("width", svgWidth)
      .attr("height", svgHeight)
      .append("g")
          .attr("transform", "translate(" + margin.right +
              "," + margin.top + ")");

remove translation of y axis

use width and height variables for scale
translate x axis to bottom

use height variable

  svg.append("g")
      .call(d3.axisBottom(xScale))
          .attr("transform", "translate(0, " +
              height + ")");

Add Styles to x and y axis

select all text elements of x axis
Create class for x and y axis

svg.append("g") .call(d3.axisBottom(xScale)) .attr("transform", "translate(0, " + height + ")") .selectAll("text") .attr("class", "xAxis");
change font style in css

increase vertical spacing of label and tick mark

.selectAll("text")
    .attr("class", "xAxis")
    .attr("transform", "translate(0, 4)");

apply style to y axis

Add x axis label

rough placement with default font

  svg.append("g")
     .append("text")
         .text("Distance")
         .attr("x", width/2)
         .attr("y", height + 60)

set text-anchor
```
 .attr("text-anchor", "middle")
```
assign style class

chain an attribute to the "g" tag of "class".

     svg.append("g")
         .attr("class", "xTitle")
         .append("text")

In the css file, set the style for the class xTitle.

codetricity/2018-09-06.md

Select an option