I'm currently working with D3.js version 4 and encountering two separate issues. Firstly, I have retrieved data using XMLHTTPRequest which includes a name, an identifying number, and additional data. After my ajax request, the structure of the data appears as follows:
function initialize() {
var xhr = new XMLHttpRequest();
var url = "/get_daily";
xhr.onreadystatechange = function () {
if (xhr.readyState === 4 && xhr.status === 200) {
var data = JSON.parse(xhr.response);
buildCard(data);
}
}
xhr.open('GET', url, true);
xhr.send();
}
[…]
0: {…}
daily_available: 73621931016302
daily_total: 74463845381120
daily_used: 841914364818
date: "11-30-2017"
__proto__: Object { … }
1: {…}
daily_available: 73620537623773
daily_total: 74463845381120
daily_used: 843307757347
date: "11-29-2017"
__proto__: Object { … }
2: {…}
daily_available: 73620626989231
daily_total: 74463845381120
daily_used: 843218391890
date: "11-28-2017"
__proto__: Object { … }
I am seeking guidance on how to represent daily_used, daily_total, and daily_available data points on a graph.
The second issue pertains to the x-Axis. The following code snippet represents my xAxis implementation:
var xScale = d3.scaleTime()
.domain([
d3.min(dataset, function (d) {
return new Date(d.date.replace(/-/g, "/"));
}),
d3.max(dataset, function (d) {
return new Date(d.date.replace(/-/g, "/"));
})
])
.range([padding, w]);
var xAxis = d3.axisBottom()
.scale(xScale)
.ticks(dataset.length)
.tickFormat(formatTime);
However, there seems to be alignment issues with the dates on the x-axis. The first date/tick is too close to the y-axis while the last tick's date is partially clipped.
https://i.sstatic.net/9F097.png
Your assistance in resolving these issues would be greatly appreciated. Most resources provide examples with simple data sets, making it challenging to address more complex scenarios.
Almost... https://i.sstatic.net/mbKKo.png