1

電話すると

var xAxis = d3.svg.axis()

新しい軸オブジェクトをインスタンス化していますか? コンポーネントがクロージャーとして実装されていることは理解していaxisますが、それがオブジェクトでもある場合は混乱します。

私の質問は、Mike の記事「Towards Reusable Charts」、特にこのセクションの最後にも当てはまります。彼のパターンを使用して、次のようなことをすると

var myChart = chart().width(720).height(80);

myChartオブジェクトですか？そうでない場合、それは何ですか? そして、これを行うことと行うことの違いは何var myChart = new chart();ですか?

4

1 に答える 1

3

はい、毎回新しい軸オブジェクトをインスタンス化しています。このインスタンスは、functionJavaScriptではファーストクラスのオブジェクトです。つまり、次のようにプロパティを割り当てることができます。

function myFunc() {}
myFunc.foo = "bar";

myFunc();// This is possible (naturally)
console.log(myFunc.foo);// ...and this is valid too

上記のコードを関数でラップした場合：

function giveMeMyFunc() {
    function myFunc() {}
    return myFunc;
}

その後、電話をかけるたびに

myFuncInstance = giveMeMyFunc();

呼び出しごとに1回宣言されるmyFuncため、（オブジェクトでもある）の新しいインスタンスを取得します。myFunc

したがって、関数もオブジェクトであることがわかりました。また、関数が別の関数を返す場合、それはオブジェクトの新しいインスタンスを返すかのようになりますが、関数でもあるため、を呼び出すことができますmyFuncInstance()。

ポイントを家に持ち帰り、おそらく他の質問に答えるために、実際にどのようd3.svg.axis()に実装されているかを見ることができます（d3ソースコードから大まかに抜粋）：

d3.svg.axis = function() {
  /* Some variables here, which essentially are instance properties (protected through closure) */
  var scale = 123;
  ...

  /* This is a function, but since JavaScript functions are first-class objects, it's essentially an instance. */
  /* Each time (the outer) `d3.svg.axis()` is called, (the inner) `axis` function is a unique – not a shared – object. */
  function axis() {
    /* This is where the work of drawing the axis takes place, but won't get
      called until the axis is used (see below). */
  }

  /* Since the inner function `axis` is also an object, the following is an instance method */
  axis.scale = function(x) {
    scale = x;// here we're setting `scale`, which is basically an instance property

    // returning `axis` – a.k.a. our instance – is what enables method chaining: myAxis.scale(5).orient("left")
    return axis;
  }

  /* More methods here, like `axis.scale` above */

  /* Last line is very important: */
  /* This is where the newly created instance is return. Remember from */
  /* above, `axis` is a function, but it's an Object too, and it has the */
  /* methods we've just applied to it. */
  return axis;
}


/* Given all that, the line below returns an instance of `axis` (the inner function),
  which has more methods applied to it. */
myAxis = d3.svg.axis();

最後に、インスタンスmyAxisも関数であるため、呼び出すことができます。これは、軸を選択範囲に適用するときにd3が行うことです。

d3.select('.x_axis').call(myAxis);

D3は、myAxis上記で定義された本体が、セレクターfunction axis() {}に一致する要素内にSVGのものを実際に描画するすべての作業を実行する関数を呼び出します。'.x_axis'

于 2013-02-01T22:48:37.007 に答える