2 days, minute by minute from "2016-01-01T00:00:00" to "2016-01-02T23:59:00"
xxxxxxxxxx<head> <meta charset="utf-8"> <script src="https://unpkg.com/d3@3.5.17/d3.js"></script> <link rel="stylesheet" href="style.css"> <style> body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; } </style></head><body> <h1>D3 scales - time</h1> <div class="ws-testbox"> <svg id="graph"></svg> </div> <div class="ws-additional-info"> <h3>Reference Links</h3> <ul id="reference-links"> <li><a href="https://github.com/d3/d3-3.x-api-reference/blob/master/Time-Formatting.md">(d3-v3) Time formatting</a></li> <li><a href="https://www.d3noob.org/2016/08/changing-number-of-ticks-on-axis-in.html">(d3-v4) Changing the number of ticks - d3noob</a></li> </ul> </div> <script> var margin = 40, width = 960 - margin * 2, height = 400 - margin * 2;// width = document.getElementsByClassName("ws-testbox")[0].offsetWidth - margin * 2,// height = 500 - margin * 2; var xScale = d3.time.scale() .range([0, width]);// .nice(d3.time.minute); var yScale = d3.scale.linear() .range([height, 0]) .nice(); var xAxis = d3.svg.axis() .scale(xScale) .orient("bottom"); var yAxis = d3.svg.axis() .scale(yScale) .orient("left"); var line = d3.svg.line() .x(function(d) { return xScale(d.date); }) .y(function(d) { return yScale(d.sin); }); var graph = d3.select("#graph") .attr("width", width + margin * 2) .attr("height", height + margin * 2) .append("g") .attr("transform", "translate(" + margin + "," + margin + ")"); var plotData; // Trigger one of the scenarios scenarioA(); /** * Helper function to assign and parse dates */ function prepareData (data) { // Parse original data data.forEach(function(d) { // 2016-01-01T00:02:00.000Z d.date = d3.time.format("%Y-%m-%dT%H:%M:%S.000Z").parse(d.timestamp); d.sin = +d.sin; }); // Trim data - to demonstrate zoom (change of x scale) // Comment out as needed data = data.splice(0, 65); return data; } /** * Main render function * @param data */ function render (data) { // Update scale's domain for the new min, max xScale.domain(d3.extent(data, function(d) { return d.date; })); yScale.domain(d3.extent(data, function(d) { return d.sin; })); graph.append("g") .attr("class", "x axis") .attr("transform", "translate(0," + height + ")") .call(xAxis); graph.append("g") .attr("class", "y axis") .call(yAxis) .append("text") .attr("transform", "rotate(-90)") .attr("y", 6) .attr("dy", ".71em") .style("text-anchor", "end") .text("Sin"); graph.append("path") .datum(data) .attr("class", "line") .attr("d", line); // Log number of ticks it would normally display console.log("Number of ticks about to be displayed: ", xAxis.ticks()[0]); } function scenarioA () { d3.json("time-mins-sin.json", function(error, data) { if (error) { console.error("Data was not retrieved", error); return; } // Save to the global plotData = data = prepareData(data); // NOTE: Fiddle with xAxis before render (which calls it) xAxis // no need to specify unless the tickFormat is set to minute - default is 10 .ticks(12) .tickFormat(d3.time.format("%M")); // no luck with this format: https://devdocs.io/d3~3/svg-axes.md#ticks // .ticks(d3.time.minutes, 5); // Draw render(data); }); }; function scenarioB () { d3.json("time-mins-sin.json", function(error, data) { if (error) { console.error("Data was not retrieved", error); return; } // Save to the global plotData = data = prepareData(data); // Get first hour (simulate granularity - zoom on the scale)// data = data.splice(0, 60); data = data.splice(0, 60); // NOTE: Fiddle with xAxis before render (which calls it) // -- v1// xAxis// .tickFormat(d3.time.format("%M")); // -- v2// xAxis// .ticks(5)// .tickFormat(d3.time.format("%M")); // -- v3// xAxis// .ticks(5); // Draw render(data); }); }; </script></body> https://unpkg.com/d3@3.5.17/d3.js