[英]Unable to Zoom d3 techanjs
I'm using almost same code which has been used in http://techanjs.org/ .我使用的代码几乎与http://techanjs.org/ 中使用的代码相同。 I was trying to add zooming feature in the chart as the developer has rendered the chart in here .
我试图在图表中添加缩放功能,因为开发人员已在此处呈现图表。 But somehow I'm not able to zoom it.
但不知何故我无法放大它。 I'm getting error selection is not defined in console.
我收到错误选择未在控制台中定义。 I'm using following code to render the chart.
我正在使用以下代码来呈现图表。https://paste.fedoraproject.org/paste/7gJq9wKL4h4s862EDuxnQQ .
https://paste.fedoraproject.org/paste/7gJq9wKL4h4s862EDuxnQQ 。 I'm sure I'm doing something wrong in here, I would really appreciate if I get any assistance regarding it as I'm still learning D3.
我确定我在这里做错了,如果我得到任何帮助,我将不胜感激,因为我仍在学习 D3。
I'd guess the problem is that you are referencing the variable selection
but it isn't defined.我猜问题是你引用了变量
selection
但它没有定义。
Hence -因此——
selection is not defined
选择未定义
selection
is the parameter passed into your bigchart
function. selection
是传递到bigchart
函数的参数。
But you then use it in your reset
, zoomed
functions where it is not defined.但是您随后在未定义它的
reset
、 zoomed
功能中使用它。
//Zoom Begins
function reset() {
zoom.scale(1);
zoom.translate([0,0]);
selection.call(draw); // this will throw an error
}
function zoomed() {
x.zoomable().domain(d3.event.transform.rescaleX(zoomableInit).domain());
y.domain(d3.event.transform.rescaleY(yInit).domain());
yPercent.domain(d3.event.transform.rescaleY(yPercentInit).domain());
selection.call(draw); // this will throw an error
}
//Zoom Ends
To fix, either pass the selection to the functions as a parameter (like the other functions) - or else make the selection
a property of BigChart
so that it can be referenced by the reset
and zoomed
functions.要修复,要么将选择作为参数传递给函数(像其他函数一样) - 或者使
selection
成为BigChart
的属性,以便它可以被reset
和zoomed
函数引用。
ie IE
// pass selection to the functions as a parameter
function reset(selection) {
zoom.scale(1);
zoom.translate([0,0]);
selection.call(draw);
}
function zoomed(selection) {
x.zoomable().domain(d3.event.transform.rescaleX(zoomableInit).domain());
y.domain(d3.event.transform.rescaleY(yInit).domain());
yPercent.domain(d3.event.transform.rescaleY(yPercentInit).domain());
selection.call(draw);
}
Then when you call the functions obviously you pass in the correct object...eg然后当你调用函数时,显然你传入了正确的对象......例如
zoom = selection.call(d3.zoom().on("zoom", zoomed));
rather than而不是
zoom = d3.zoom().on("zoom", zoomed),
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.