2

d3 の再利用可能なチャートに関するこのチュートリアルを読んでいます。最初の「構成」セクションで、著者はチャート関数を作成する 2 つの方法について説明しています。

// Method 1
function chart(config) {
  // generate chart here, using `config.width` and `config.height`
}

// Method 2
function chart(config) {
  return function() {
    // generate chart here, using `config.width` and `config.height`
  };
}

彼は最初の方法よりも 2 番目の方法を提案しています。

ただし、呼び出し元は、チャート関数 (選択するチャートのタイプが複数ある場合) と構成オブジェクトの両方を管理する必要があります。チャート構成をチャート関数にバインドするには、クロージャーが必要です。

しかし、この説明はわかりません。最初の方法に対する方法 2 の利点は何ですか?

4

2 に答える 2

2

それは情報の管理についてです。config最初のケースでは、チャートの構成を変更する場合、呼び出し元はそれを次の宛先に渡す必要があることを覚えておく必要がありchartます。

chart(config);
config.xy = 42;
// update the chart, calling chart again
chart(config);

barchartここで、複数の潜在的に異なるチャートがある場合（したがって、、などの異なるチャート関数linechart）、呼び出し元はどの構成をどの関数に渡すかを覚えておく必要があります。

チャートの「タイプ」が何らかの形で自己完結型であると、より簡単になります。2番目の例では、作成したグラフを更新する方法を知っている関数への参照を取得します。したがって、チャートが作成された関数を知らなくても、チャートを更新できます。

var myChart = chart(config);
config.xy = 42;
// update the chart
myChart();

これはD3が使用するアプローチのようですが、オブジェクト指向のアプローチを使用することもできます。つまりChart、チャートをレンダリングおよび更新するロジックをカプセル化する適切なコンストラクター関数を作成します。

于 2012-09-30T20:08:01.327 に答える
1

リストした2つよりも優れていることがわかった方法を次に示します-d3ソースコードからピックアップしたもの:

function chart() {
    var width, height;

    function display() {
        console.log("My dimensions are: (" + width + " x " + height + ").");
    }

    display.width = function(value) {
        if (!arguments.length) return width;
        width = value;
        return display;
    };

    display.height = function(value) { 
        if (!arguments.length) return height;
        height = value;
        return display;
    };

    return display;    
}

var config = {width: 5, height: 10},
    myChart = chart().width(config.width).height(config.height);

console.log("Width:", myChart.width());   // Width: 5
console.log("Height:", myChart.height()); // Height: 10
myChart(); // My dimensions are (5 x 10).
myChart.height(5);
myChart(); // My dimensions are (5 x 5).
于 2012-09-30T23:21:44.283 に答える