我使用
SVG
和d3创建了一个缩放/平移
图表。我正在尝试使用Canvas
创建完全相同的图表。我的问题是,在对Canvas
图表进行缩放和平移时,图表会消失,我无法找出原因。我创建了两个JSBin来显示两者的代码。有人可以帮助我吗?
我的SVG
缩放代码如下:
// 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
}
我的 Canvas
缩放代码如下:
// 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();
}