无法缩放 d3 techanjs

Question

我使用的代码与http://techanjs.org/ 中使用的代码几乎相同。我试图在图表中添加缩放功能，因为开发人员已在here 中呈现图表。但不知何故，我无法放大它。我收到错误选择未在控制台中定义。我正在使用以下代码来呈现图表。 https://paste.fedoraproject.org/paste/7gJq9wKL4h4s862EDuxnQQ。我确定我在这里做错了，如果我能得到任何帮助，我将不胜感激，因为我仍在学习 D3。

Answer 1

我猜问题是你引用了变量selection，但它没有被定义。

因此 -

选择未定义

selection 是传递给bigchart 函数的参数。

但是您随后在未定义的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

要修复，要么将选择作为参数传递给函数（与其他函数一样） - 要么将 selection 设为 BigChart 的属性，以便 reset 和 @987654331 可以引用它@函数。

即

 // 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);
 }

那么当你调用函数时，显然你传入了正确的对象......例如

zoom = selection.call(d3.zoom().on("zoom", zoomed));

而不是

zoom = d3.zoom().on("zoom", zoomed),