2

私は何かに行き詰まってしまったのですが、ばかげているかもしれません! このコードの最後にある括弧 ")()" が何をするのかを理解しようとしていますか? jsFiddleので、それらを削除しても何も表示されません。コードのこの部分にさらに関数を追加する必要がありますが、括弧が原因でエラーが発生しました。

(function () {

    var n = 143,
        duration = 750,
        now = new Date(Date.now() - duration),
        count = 0,
        data = d3.range(n).map(function () {
            return 0;
        });

    var margin = {
        top: 6,
        right: 0,
        bottom: 20,
        left: 40
    },
    width = 560 - margin.right,
        height = 120 - margin.top - margin.bottom;

    var x = d3.time.scale()
        .domain([now - (n - 2) * duration, now - duration])
        .range([0, width]);

    var y = d3.scale.linear()
        .range([height, 0]);

    var line = d3.svg.line()
        .interpolate("basis")
        .x(function (d, i) {
        return x(now - (n - 1 - i) * duration);
    })
        .y(function (d, i) {
        return y(d);
    });

    var svg = d3.select("body").append("p").append("svg")
        .attr("width", width + margin.left + margin.right)
        .attr("height", height + margin.top + margin.bottom)
        .style("margin-left", -margin.left + "px")
        .append("g")
        .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

    svg.append("defs").append("clipPath")
        .attr("id", "clip")
        .append("rect")
        .attr("width", width)
        .attr("height", height);

    var axis = svg.append("g")
        .attr("class", "x axis")
        .attr("transform", "translate(0," + height + ")")
        .call(x.axis = d3.svg.axis().scale(x).orient("bottom"));

    var path = svg.append("g")
        .attr("clip-path", "url(#clip)")
        .append("path")
        .data([data])
        .attr("class", "line");

    tick();

    d3.select(window)
        .on("scroll", function () {
        ++count;
    });

    function tick() {

        // update the domains
        now = new Date();
        x.domain([now - (n - 2) * duration, now - duration]);
        y.domain([0, d3.max(data)]);

        // push the accumulated count onto the back, and reset the count
        data.push(Math.random()*10);
        count = 0;

        // redraw the line
        svg.select(".line")
            .attr("d", line)
            .attr("transform", null);

        // slide the x-axis left
        axis.transition()
            .duration(duration)
            .ease("linear")
            .call(x.axis);

        // slide the line left
        path.transition()
            .duration(duration)
            .ease("linear")
            .attr("transform", "translate(" + x(now - (n - 1) * duration) + ")")
            .each("end", tick);

        // pop the old data point off the front
        data.shift();

    }
})()

ありがとうございました！！

4

3 に答える 3

1

即時呼び出し関数式 ( IIFE)

ここでよく読んでください：http://benalman.com/news/2010/11/immediately-invoked-function-expression/

もちろん、任意の関数を追加できますが、スコープのため、これらの関数は同じスコープまたはより深いスコープでのみ呼び出すことができます。

例 test() 関数: http://jsfiddle.net/ZaJZu/

于 2013-06-29T11:56:51.503 に答える
1

無名関数を定義しました。通常、次のような名前付き関数:

function myfunc(){
   //code
}

呼び出すことができます:

myfunc();

まさにこの()括弧がやっています。完了時に無名関数を呼び出しました。これらが必要ない場合は、関数に名前を付けて、上記の例のように必要な場所から呼び出します。

括弧なしで更新されたフィドル

于 2013-06-29T12:03:00.600 に答える
0

全体を囲む外側の括弧は、関数を (関数宣言ではなく) 関数式に変換します。それを行う方法は他にもありますが、括弧は一般的な規則です。関数式の末尾にある () は、即時関数呼び出しをトリガーするものです。

これは、再帰関数になるため、自己呼び出しの無名関数ではありません。このパターンは、即時呼び出し関数式 (IIFE) と呼ばれます。これは一般的にモジュール パターンで使用されますが、小さなインライン関数の結果を変数に代入するためにも比較的頻繁に使用されます。通常の古い invoked-later 関数式 (最後に () がない) も、一般的にコールバックとして渡されるか、変数に割り当てられるか、メソッドを定義するためにオブジェクト リテラルでインラインで使用されます。

于 2013-06-29T12:05:33.743 に答える