block by mbostock 6618724

Subsecond Ticks

Full Screen

Fixing a bug with tick identity in the axis component.

index.html

<!DOCTYPE html>
<meta charset="utf-8">
<style>

.axis text {
  font: 10px sans-serif;
}

.axis .title {
  font-weight: bold;
  text-anchor: end;
}

.axis path,
.axis line {
  fill: none;
  stroke: #000;
  shape-rendering: crispEdges;
}

.x.axis path {
  display: none;
}

.line {
  fill: none;
  stroke: steelblue;
  stroke-width: 1.5px;
}

</style>
<body>
<script src="//d3js.org/d3.v3.min.js"></script>
<script>

var margin = {top: 20.5, right: 30, bottom: 30, left: 40.5},
    width = 960 - margin.left - margin.right,
    height = 500 - margin.top - margin.bottom;

var x = d3.time.scale()
    .range([0, width]);

 var y = d3.scale.linear()
    .range([height, 0]);

 var xAxis = d3.svg.axis()
    .scale(x)
    .orient("bottom");

var yAxis = d3.svg.axis()
    .scale(y)
    .orient("left");

var line = d3.svg.line()
    .x(function(d) { return x(d.time); })
    .y(function(d) { return y(d.value); });

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 + ")");

d3.tsv("data.tsv", type, function(error, data) {
  x.domain(d3.extent(data, function(d) { return d.time; }));
  y.domain(d3.extent(data, function(d) { return d.value; }));

  svg.append("g")
      .attr("class", "x axis")
      .attr("transform", "translate(0," + height + ")")
      .call(xAxis);

  svg.append("g")
      .attr("class", "y axis")
      .call(yAxis)
    .append("text")
      .attr("class", "title")
      .attr("transform", "rotate(-90)")
      .attr("y", 6)
      .attr("dy", ".71em")
      .text("Value");

  svg.append("path")
      .datum(data)
      .attr("class", "line")
      .attr("d", line);
});

function type(d) {
  d.time = new Date(+d.time * 1000);
  d.value = +d.value;
  return d;
}

</script>

data.tsv

value	time
6.281247165532879	1377244506.794737
6.54390022675737	1377244506.898609
6.640204081632653	1377244506.994899
6.741292517006802	1377244507.095995
6.840136054421769	1377244507.194835
6.940612244897959	1377244507.295265
7.04047619047619	1377244507.395149
7.140453514739229	1377244507.495221
7.24063492063492	1377244507.59541
7.35625850340136	1377244507.710992
7.440340136054422	1377244507.795081
7.540748299319728	1377244507.895482
7.64079365079365	1377244507.995466
7.741247165532879	1377244508.095888
7.841156462585034	1377244508.195787
7.940022675736961	1377244508.294706
8.04063492063492	1377244508.39531
8.140952380952381	1377244508.49563
8.240294784580499	1377244508.59497
8.340566893424036	1377244508.69526
8.440861678004536	1377244508.795564