Skip to content

Instantly share code, notes, and snippets.

@mbostock
Last active Feb 22, 2019
Embed
What would you like to do?
d3.time.scale nice
license: gpl-3.0
<!DOCTYPE html>
<meta charset="utf-8">
<style>
.axis text {
font: 10px sans-serif;
}
.axis path,
.axis line {
fill: none;
stroke: #000;
shape-rendering: crispEdges;
}
</style>
<body>
<script src="//d3js.org/d3.v3.min.js"></script>
<script>
var margin = {top: 100, right: 100, bottom: 100, left: 100},
width = 960 - margin.left - margin.right,
height = 500 - margin.top - margin.bottom;
var x = d3.time.scale()
.domain([new Date, new Date])
.nice(d3.time.week)
.range([0, width]);
var svg = d3.select("body").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 + ")");
svg.append("g")
.attr("class", "x axis")
.call(d3.svg.axis().scale(x).orient("bottom"));
</script>
@kylelk
Copy link

kylelk commented Jan 17, 2014

Thank you, This was very helpful and easy to understand

@SedesGobhani
Copy link

SedesGobhani commented Feb 22, 2019

Hi Mike. Thanks for this great framework!

I'm using your d3.v5 scaleTime and timeFormat with this basic approach (hopefully this line is sufficient for context):
.call(d3.axisBottom(xScale).tickFormat(d3.timeFormat("%Y")))

I'm just wondering if you can think of some way I could change the axis label text? In my case eg. I would like to go to -10000 but it only prints "0000" (4 digit limit).

Thanks,
Sedes

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment