2

私はd3チュートリアルを進めており、d3とjavascriptの両方を学習しています。私の目標は、次のURLにある積み上げ棒グラフの例を理解して変更することです。

http://bl.ocks.org/3886208

このチャートのコードには、次の箇所があります。

data.forEach(function(d) {
    var y0 = 0;
    d.ages = color.domain().map(function(name) **{ return {name: name, y0: y0, y1: y0 += +d[name]}; });**
    d.total = d.ages[d.ages.length - 1].y1;
  });

太字の「{return{name：name、y0：y0、y1：y0 + = + d [name]}」で、どのようなプロセスや関数が実行されているか教えてください。（名前）の扱いを定義しているように見えますが、コードが非常に簡潔であるため、検索語を理解してそれが何をしているのかを見つけることができません。「これは、jsまたはd3でxを実行している人の例です。詳細については、ここにアクセスする必要があります」のような応答を期待しています。

4

2 に答える 2

3

中括弧で囲まれたものは、オブジェクトリテラルです。匿名関数 は、function(name)によって返される配列内のすべての値に対してオブジェクトリテラルを返しcolor.domain()ます。 map組み込みのjavascript配列です。

うまくいけば、それはあなたがより多くの情報を検索するのに十分です。オブジェクトリテラルはjavascriptでよく使用されます。これ、無名関数、クロージャなど（d3のようなフレームワークでよく使用されるイディオム）をカバーするまともな入門書（CrockfordのJavascript：The Good Partsなど）を読むとよいでしょう。

于 2012-11-22T14:23:15.730 に答える
3

積み上げ棒グラフのD3.jsの例を参照していると思います

nameコードは、3つの異なるオブジェクト（ 、、y0および）を含むように初期化されたオブジェクトを返します。それにy1値を割り当てた後y1、変数の値も。だけ増加しy0ますd[name]。同じコードを書き直していますが、構文が異なるため、理解しやすくなっています。

var y0 = 0;
d.ages = color.domain().map(function(name) { return {name: name, y0: y0, y1: y0 += +d[name]}; });

次のように翻訳できます：

var y0 = 0; // Initialize the temp var

d.ages = color.domain()
  .map(function(name) { 
    var myObj = { // Create and initialize the variable that will be returned
      name: name, 
      y0: y0, 
      y1: y0 + Number(d[name])
    };

  y0 += Number(d[name]); // Increase y0

  return myObj; // return the object and continue with the remaining values if there's a list
});

したがって、たとえば、入力データで値を含む1行を含むリストを受け取った場合、その行の他の3つのオブジェクトを含むオブジェクト[3, 5, 9]が作成されます。ages

  ages: [
    Object { name="youVariableName", y0=0, y1=3}
    Object { name="youVariableName", y0=3, y1=8}
    Object { name="youVariableName", y0=8, y1=17}
  ]

残りの行についても同様に、対応する値を示します。

于 2014-09-04T22:27:08.403 に答える