Menu
I created zooming/panning graph with d3 using SVG. I'm trying to create the same exact graph with Canvas. My issue is, when it comes to the zooming and panning of the Canvas graph, the graph is disappearing and I cannot figure out why. I created two JSBin's to show the code of both. Can someone assist me.
SVG - JSBin
Canvas - JSBin
My SVG zoom code looks like this:
// Zoom Components
zoom = d3.zoom()
.scaleExtent([1, dayDiff*12])
.translateExtent([[0, 0], [width, height]])
.extent([[0, 0], [width, height]])
.on("zoom", zoomed);
function zoomed(){
t = d3.event.transform;
xScale.domain(t.rescaleX(x2).domain());
xAxis = d3.axisBottom(xScale).tickSize(0).tickFormat(d3.timeFormat('%b'));
focus.select(".axis--x").call(xAxis); //xAxis changes
usageLinePath.attr('d',line); //line path reference, regenerate
}
My Canvas zoom code looks like this:
// Zoom Components
zoom = d3.zoom()
.scaleExtent([1, dayDiff*12])
.translateExtent([[0, 0], [width, height]])
.extent([[0, 0], [width, height]])
.on("zoom", zoomed);
function zoomed() {
t = d3.event.transform;
x.domain(t.rescaleX(x2).domain());
context.save();
context.clearRect(0, 0, width, height);
draw();
context.restore();
}
function draw() {
xAxis();
yAxis();
context.beginPath();
line(data);
context.lineWidth = 1.5;
context.strokeStyle = "steelblue";
context.stroke();
}
552
There is one major source of grief that causes your line to disappear, and it is only triggered on the zoom:
function zoomed() {
t = d3.event.transform;
x.domain(t.rescaleX(x2).domain()); // here
...
}
Rescaling won't work on x2 as you haven't defined its domain. x2 is your reference scale that is used to set x on each zoom, it should be the same as x to start with. However, the default domain for a d3.timeScale() is from January 1, 2000 to January 2, 2000 (see API docs), which won't work out for your data as your data does not overlap this period.
You need to set the domain of x2 as well as x. If you do so after you set the initial domain for x with: x2.domain(x.domain()), you should get a chart that updates (jsbin) as you now have a domain that overlaps your data.
However, now, the issue is that you need to clip your line, which you do in your svg example but not the canvas. To do so you could use something like:
function draw() {
xAxis();
yAxis();
// save context without clip apth
context.save();
// create a clip path:
context.beginPath()
context.rect(0, 0, width, height);
context.clip();
// draw line in clip path
context.beginPath()
line(data);
context.lineWidth = 1.5;
context.strokeStyle = "steelblue";
context.stroke();
// restore context without clip path
context.restore();
}
See this jsbin
And as we shouldn't let the axes overwrite themselves: Here's a jsbin that erases the previous axes (with a commented out code block that redefines the y domain based on what values are contained in the selected x domain).
For good measure, here's a snippet of the last jsbin (scaled down for snippet view):
var data = getData().map(function (d) {
return d;
});
var canvas = document.querySelector("canvas"),
context = canvas.getContext("2d");
var margin = { top: 20, right: 20, bottom: 30, left: 50 },
width = canvas.width - margin.left - margin.right,
height = canvas.height - margin.top - margin.bottom;
var parseTime = d3.timeParse("%d-%b-%y");
// setup scales
var x = d3.scaleTime()
.range([0, width]);
var x2 = d3.scaleTime().range([0, width]);
var y = d3.scaleLinear()
.range([height, 0]);
// setup domain
x.domain(d3.extent(data, function (d) { return moment(d.Ind, 'YYYYMM'); }));
y.domain(d3.extent(data, function (d) { return d.KSum; }));
x2.domain(x.domain());
// get day range
var dayDiff = daydiff(x.domain()[0],x.domain()[1]);
// line generator
var line = d3.line()
.x(function (d) { return x(moment(d.Ind, 'YYYYMM')); })
.y(function (d) { return y(d.KSum); })
.curve(d3.curveMonotoneX)
.context(context);
// zoom
var zoom = d3.zoom()
.scaleExtent([1, dayDiff])
.translateExtent([[0, 0], [width, height]])
.extent([[0, 0], [width, height]])
.on("zoom", zoomed);
d3.select("canvas").call(zoom)
context.translate(margin.left, margin.top);
draw();
//
function draw() {
// remove everything:
context.clearRect(-margin.left, -margin.top, canvas.width, canvas.height);
/*
// Calculate the y axis domain across the selected x domain:
newYDomain = d3.extent(data, function(d) {
if ( (x(moment(d.Ind, 'YYYYMM')) > 0) && (x(moment(d.Ind, 'YYYYMM')) < width) ) {
return d.KSum;
}
});
// Don't update the y axis if there are no points to set a new domain, just keep the old domain.
if ((newYDomain[0] !== undefined) && (newYDomain[0] != newYDomain[1])) {
y.domain(newYDomain);
}
//*/
// draw axes:
xAxis();
yAxis();
// save context without clip apth
context.save();
// create a clip path:
context.beginPath()
context.rect(0, 0, width, height);
context.clip();
// draw line in clip path
context.beginPath()
line(data);
context.lineWidth = 1.5;
context.strokeStyle = "steelblue";
context.stroke();
// restore context without clip path
context.restore();
}
function zoomed() {
t = d3.event.transform;
x.domain(t.rescaleX(x2).domain());
draw();
}
function xAxis() {
var tickCount = 10,
tickSize = 6,
ticks = x.ticks(tickCount),
tickFormat = x.tickFormat();
context.beginPath();
ticks.forEach(function (d) {
context.moveTo(x(d), height);
context.lineTo(x(d), height + tickSize);
});
context.strokeStyle = "black";
context.stroke();
context.textAlign = "center";
context.textBaseline = "top";
ticks.forEach(function (d) {
context.fillText(tickFormat(d), x(d), height + tickSize);
});
}
function yAxis() {
var tickCount = 10,
tickSize = 6,
tickPadding = 3,
ticks = y.ticks(tickCount),
tickFormat = y.tickFormat(tickCount);
context.beginPath();
ticks.forEach(function (d) {
context.moveTo(0, y(d));
context.lineTo(-6, y(d));
});
context.strokeStyle = "black";
context.stroke();
context.beginPath();
context.moveTo(-tickSize, 0);
context.lineTo(0.5, 0);
context.lineTo(0.5, height);
context.lineTo(-tickSize, height);
context.strokeStyle = "black";
context.stroke();
context.textAlign = "right";
context.textBaseline = "middle";
ticks.forEach(function (d) {
context.fillText(tickFormat(d), -tickSize - tickPadding, y(d));
});
context.save();
context.rotate(-Math.PI / 2);
context.textAlign = "right";
context.textBaseline = "top";
context.font = "bold 10px sans-serif";
context.fillText("Price (US$)", -10, 10);
context.restore();
}
function getDate(d) {
return new Date(d.Ind);
}
function daydiff(first, second) {
return Math.round((second - first) / (1000 * 60 * 60 * 24));
}
function getData() {
return [
{
"BriteID": "BI-43dd32fe-ecbc-48d4-a8dc-e1f66110a542",
"Ind": 201501,
"TMin": 30.43,
"TMax": 77.4,
"KMin": 0.041,
"KMax": 1.364,
"KSum": 625.08
},
{
"BriteID": "BI-43dd32fe-ecbc-48d4-a8dc-e1f66110a542",
"Ind": 201502,
"TMin": 35.3,
"TMax": 81.34,
"KMin": 0.036,
"KMax": 1.401,
"KSum": 542.57
},
{
"BriteID": "BI-43dd32fe-ecbc-48d4-a8dc-e1f66110a542",
"Ind": 201503,
"TMin": 32.58,
"TMax": 81.32,
"KMin": 0.036,
"KMax": 1.325,
"KSum": 577.83
},
{
"BriteID": "BI-43dd32fe-ecbc-48d4-a8dc-e1f66110a542",
"Ind": 201504,
"TMin": 54.54,
"TMax": 86.55,
"KMin": 0.036,
"KMax": 1.587,
"KSum": 814.62
},
{
"BriteID": "BI-43dd32fe-ecbc-48d4-a8dc-e1f66110a542",
"Ind": 201505,
"TMin": 61.35,
"TMax": 88.61,
"KMin": 0.036,
"KMax": 1.988,
"KSum": 2429.56
},
{
"BriteID": "BI-43dd32fe-ecbc-48d4-a8dc-e1f66110a542",
"Ind": 201506,
"TMin": 69.5,
"TMax": 92.42,
"KMin": 0.037,
"KMax": 1.995,
"KSum": 2484.93
},
{
"BriteID": "BI-43dd32fe-ecbc-48d4-a8dc-e1f66110a542",
"Ind": 201507,
"TMin": 71.95,
"TMax": 98.62,
"KMin": 0.037,
"KMax": 1.864,
"KSum": 2062.05
},
{
"BriteID": "BI-43dd32fe-ecbc-48d4-a8dc-e1f66110a542",
"Ind": 201508,
"TMin": 76.13,
"TMax": 99.59,
"KMin": 0.045,
"KMax": 1.977,
"KSum": 900.05
},
{
"BriteID": "BI-43dd32fe-ecbc-48d4-a8dc-e1f66110a542",
"Ind": 201509,
"TMin": 70,
"TMax": 91.8,
"KMin": 0.034,
"KMax": 1.458,
"KSum": 401.39
}];
}<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.10.0/d3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.js"></script>
<canvas width="500" height="200"></canvas>You need to clear the canvas each time you draw, by adding just inside the draw function,
context.clearRect(0-margin.left, 0, canvas.width, canvas.height);
and the rest is,
var data = getData().map(function (d) {
return d;
});
var canvas = document.querySelector("canvas"),
context = canvas.getContext("2d");
var margin = { top: 20, right: 20, bottom: 30, left: 50 },
width = canvas.width - margin.left - margin.right,
height = canvas.height - margin.top - margin.bottom;
var parseTime = d3.timeParse("%d-%b-%y");
// setup scales
var x = d3.scaleTime()
.range([0, width]);
var x2 = d3.scaleTime().range([0, width]);
var y = d3.scaleLinear()
.range([height, 0]);
// setup domain
x.domain(d3.extent(data, function (d) { return moment(d.Ind, 'YYYYMM'); }));
y.domain(d3.extent(data, function (d) { return d.KSum; }));
x2.domain(x.domain());
// get day range
var dayDiff = daydiff(x.domain()[0],x.domain()[1]);
// line generator
var line = d3.line()
.x(function (d) { return x(moment(d.Ind, 'YYYYMM')); })
.y(function (d) { return y(d.KSum); })
.curve(d3.curveMonotoneX)
.context(context);
// zoom
var zoom = d3.zoom()
.scaleExtent([1, dayDiff * 12])
.translateExtent([[0, 0], [width, height]])
.extent([[0, 0], [width, height]])
.on("zoom", zoomed);
d3.select("canvas").call(zoom)
context.translate(margin.left, margin.top);
draw();
function draw() {
context.clearRect(0-margin.left, 0, canvas.width, canvas.height);
xAxis();
yAxis();
context.beginPath();
line(data);
context.lineWidth = 1.5;
context.strokeStyle = "steelblue";
context.stroke();
}
function zoomed() {
console.log(d3.event);
t = d3.event.transform;
x.domain(t.rescaleX(x2).domain());
context.save();
context.clearRect(0, 0, width, height);
// context.translate(d3.event.translate[0], d3.event.translate[1]);
// context.scale(d3.event.scale, d3.event.scale);
draw();
context.restore();
}
function xAxis() {
var tickCount = 10,
tickSize = 6,
ticks = x.ticks(tickCount),
tickFormat = x.tickFormat();
context.beginPath();
ticks.forEach(function (d) {
context.moveTo(x(d), height);
context.lineTo(x(d), height + tickSize);
});
context.strokeStyle = "black";
context.stroke();
context.textAlign = "center";
context.textBaseline = "top";
ticks.forEach(function (d) {
context.fillText(tickFormat(d), x(d), height + tickSize);
});
}
function yAxis() {
var tickCount = 10,
tickSize = 6,
tickPadding = 3,
ticks = y.ticks(tickCount),
tickFormat = y.tickFormat(tickCount);
context.beginPath();
ticks.forEach(function (d) {
context.moveTo(0, y(d));
context.lineTo(-6, y(d));
});
context.strokeStyle = "black";
context.stroke();
context.beginPath();
context.moveTo(-tickSize, 0);
context.lineTo(0.5, 0);
context.lineTo(0.5, height);
context.lineTo(-tickSize, height);
context.strokeStyle = "black";
context.stroke();
context.textAlign = "right";
context.textBaseline = "middle";
ticks.forEach(function (d) {
context.fillText(tickFormat(d), -tickSize - tickPadding, y(d));
});
context.save();
context.rotate(-Math.PI / 2);
context.textAlign = "right";
context.textBaseline = "top";
context.font = "bold 10px sans-serif";
context.fillText("Price (US$)", -10, 10);
context.restore();
}
function getDate(d) {
return new Date(d.Ind);
}
function daydiff(first, second) {
return Math.round((second - first) / (1000 * 60 * 60 * 24));
}
function getData() {
return [
{
"BriteID": "BI-43dd32fe-ecbc-48d4-a8dc-e1f66110a542",
"Ind": 201501,
"TMin": 30.43,
"TMax": 77.4,
"KMin": 0.041,
"KMax": 1.364,
"KSum": 625.08
},
{
"BriteID": "BI-43dd32fe-ecbc-48d4-a8dc-e1f66110a542",
"Ind": 201502,
"TMin": 35.3,
"TMax": 81.34,
"KMin": 0.036,
"KMax": 1.401,
"KSum": 542.57
},
{
"BriteID": "BI-43dd32fe-ecbc-48d4-a8dc-e1f66110a542",
"Ind": 201503,
"TMin": 32.58,
"TMax": 81.32,
"KMin": 0.036,
"KMax": 1.325,
"KSum": 577.83
},
{
"BriteID": "BI-43dd32fe-ecbc-48d4-a8dc-e1f66110a542",
"Ind": 201504,
"TMin": 54.54,
"TMax": 86.55,
"KMin": 0.036,
"KMax": 1.587,
"KSum": 814.62
},
{
"BriteID": "BI-43dd32fe-ecbc-48d4-a8dc-e1f66110a542",
"Ind": 201505,
"TMin": 61.35,
"TMax": 88.61,
"KMin": 0.036,
"KMax": 1.988,
"KSum": 2429.56
},
{
"BriteID": "BI-43dd32fe-ecbc-48d4-a8dc-e1f66110a542",
"Ind": 201506,
"TMin": 69.5,
"TMax": 92.42,
"KMin": 0.037,
"KMax": 1.995,
"KSum": 2484.93
},
{
"BriteID": "BI-43dd32fe-ecbc-48d4-a8dc-e1f66110a542",
"Ind": 201507,
"TMin": 71.95,
"TMax": 98.62,
"KMin": 0.037,
"KMax": 1.864,
"KSum": 2062.05
},
{
"BriteID": "BI-43dd32fe-ecbc-48d4-a8dc-e1f66110a542",
"Ind": 201508,
"TMin": 76.13,
"TMax": 99.59,
"KMin": 0.045,
"KMax": 1.977,
"KSum": 900.05
},
{
"BriteID": "BI-43dd32fe-ecbc-48d4-a8dc-e1f66110a542",
"Ind": 201509,
"TMin": 70,
"TMax": 91.8,
"KMin": 0.034,
"KMax": 1.458,
"KSum": 401.39
}];
}
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
