javascript - 无法缩放 d3 techanjs

Question

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

Answer 1

我猜问题是您正在引用变量 selection 但它未定义。

因此 -

selection is not defined

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