Basic Tasks
Create Container
const svg = d3
.select('#playground')
.append('svg')
.attr('width', width + margin.left + margin.right)
.attr('height', height + margin.top + margin.bottom)
.append('g')
.attr('transform',
'translate(' + margin.left + ',' + margin.top + ')');
Axes: Create
const x = d3Scale.scaleLinear().domain([0, 100]).range([0, width]);
const y = d3Scale.scaleLinear().domain([0, 100]).range([height, 0]);
const xAxis = d3Axis.axisBottom(x).tickFormat(d3.timeFormat('%m/%d'));
const yAxis = d3Axis.axisLeft(y).ticks(10);
Axes
Format
var axisTimeFormat = d3.time.format.multi([
[".%L", (d) => d.getMilliseconds()],
[":%S", (d) => d.getSeconds()],
["%H:%M", (d) => d.getMinutes()],
["%H:%M", (d) => d.getHours()],
["%a %d", (d) => d.getDay() && d.getDate() != 1],
["%b %d", (d) => d.getDate() != 1; }],
["%B", (d) => d.getMonth()],
["%Y", () => true]
]);
var xAxis = d3.svg.axis()
.scale(x)
.orient("bottom")
.tickFormat(axisTimeFormat);
Installation
$ npm install -save d3
d3-scale
d3-array
d3-shape
d3-interpolate
d3-color
d3-time-format
d3-ease
d3-transition
d3-selection
d3-time
d3-path
d3-dispatch
d3-format
d3-timer
d3-drag
d3-geo
d3-brush
d3-dsv
d3-random
