I have a d3 visualisation that works fine with the current stable release (3.x
) however I wanted to implement the Pan & Zoom function so I upgraded to 4.alpha
.
This threw a lot of bugs as the syntax has changed. I updated the variable names, however there is one remaining bug pertaining to the second line of the following code:
function type(d) {
d.date = formatDate.parse(d.date);
d.Flux = +d.Flux;
return d;
}
Opening up the page source via the browser, I see that formatDate.parse is not a function.
The visualisation is currently not rendering.
I have tried combing the D3 4.alpha
documentation, to no avail.
Further up in the code, formatDate
is defined as follows:
var formatDate = d3.timeFormat("%d-%b-%y");
I am happy to post the original code, its about 70 lines long, and a bit hacky tho:
var margin = {top: 20, right: 20, bottom: 30, left: 50},
width = 1400// - margin.left - margin.right,
height = 1400// - margin.top - margin.bottom;
var formatDate = d3.timeFormat("%d-%b-%y");
var x = d3.scaleLinear()
.range([0, width]);
var y = d3.scaleLinear()
.range([height, 0]);
var line = d3.line()
.x(function(d) { return x(d.date); })
.y(function(d) { return y(d.Flux); });
var svg = d3.selectAll("#ExoPlanet, #ExoPlanet2").append("svg")
.attr("width", '90%')
.attr("height", '70%')
.attr('viewBox','0 0 '+Math.min(width,height)+' '+Math.min(width,height))
.attr('preserveAspectRatio','xMinYMin')
.append("g")
.call(d3.zoom()
.scaleExtent([1 / 2, 4])
.on("zoom", zoomed)) ;
function zoomed() {
var transform = d3.event.transform;
circle.attr("transform", function(d) {
return "translate(" + transform.applyX(d[0]) + "," + transform.applyY(d[1]) + ")";
});
}
d3.tsv("/FluxTime.tsv", type, function(error, data) {
if (error) throw error;
x.domain(d3.extent(data, function(d) { return d.date; }));
y.domain(d3.extent(data, function(d) { return d.Flux; }));
svg.selectAll("dot")
.data(data)
.enter().append("circle")
.attr("r", 2.0)
.attr("cx", function(d) { return x(d.date); })
.attr("cy", function(d) { return y(d.Flux); })
.attr("stroke", "#CE9A76");
});
function type(d) {
d.date = formatDate.parse(d.date));
d.Flux = +d.Flux;
return d;
}
A screenshot of the first 8 entries in the dataset:
In D3 3.5, you could parse just the way you did, setting the time format...
var formatDate = d3.time.format("%d-%b-%y");
...and then using this time format to parse:
d.date = formatDate.parse(d.date);
But, using D3 4.0, you have to parse dates in a different way, using timeParse
:
var parseTime = d3.timeParse("%d-%b-%y");
And, then, modifying your accessor function:
function type(d) {
d.date = parseTime(d.date);
d.Flux = +d.Flux;
return d;
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With