无法缩放d3技术

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和zoomed函数就可以引用它。

即

 // 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),