web-dev-qa-db-ja.com

D3の関数リテラルで「d」を使用しますか？

私はjavascriptの構文/文法についてあまり知識がなくてもD3を自分で教えています。次の関数リテラルのパラメータとしての「d」の使用について誰かが説明できますか？

作業中のデータセットを指しているようですが、その背後にある文法を理解したいと思います。

    d3.selectAll("circle")
        .attr("cy",function (d) { return percent_scale(d.late_percent);})
        .attr("cx",function (d) { return time_scale(d.time);})
        .attr("r",1);
functiond3.jsliterals
12
user3562812

これは無名関数と呼ばれ、名前付きラベルが付けられていない関数です。 Javascriptの無名関数は他のすべてのオブジェクトと同様のオブジェクトであるため、他のjavascript関数にパラメーターとして渡すことができます。

D3の場合、2番目のパラメーターとして関数を渡すことができます。ご存知のとおり、この関数は現在のデータ要素と現在のデータ要素のインデックスを使用して呼び出されます。 2番目のパラメーターが関数でない場合は、代わりに値を使用できます。

あなたの例では：

d3.selectAll("circle")
        .attr("cy",function (d) { return percent_scale(d.late_percent);})
        .attr("cx",function (d) { return time_scale(d.time);})
        .attr("r",1);

cyとcxの両方に無名関数呼び出しの戻り値に基づいて値が割り当てられ、rには静的な値が割り当てられます。これを次のように書き直すことができます。

function setY(d) { return percent_scale(d.late_percent);}

function setX(d) { return time_scale(d.time); }

d3.selectAll("circle")
        .attr("cy", setY)
        .attr("cx", setX)
        .attr("r",1);

ここでは、無名関数呼び出しをより標準的な関数定義に置き換え、d3呼び出しで呼び出される関数の名前を指定しました。これは以前とまったく同じように機能します。また、この場合、dには魔法のようなものは何もないことに注意してください。

function setY(foo) { return percent_scale(foo.late_percent);}

function setX(foo) { return time_scale(foo.time); }

d3.selectAll("circle")
        .attr("cy", setY)
        .attr("cx", setX)
        .attr("r",1);

このコードも同じことをします。パラメータの名前をdからfooに変更したことに注意してください。ただし、これにより、関数内でパラメータにアクセスする方法が変わるだけです。関数呼び出し以外では効果はありません。通常、d3のドキュメントとチュートリアルでは、現在のデータ要素にdが使用され、現在のデータ要素のインデックスにiが使用されていることがわかります。インデックスは、次のように関数呼び出しに2番目の要素として渡されます。

function setY(d, i) { return percent_scale(d.late_percent);}

function setX(d, i) { return time_scale(d.time); }

d3.selectAll("circle")
        .attr("cy", setY)
        .attr("cx", setX)
        .attr("r",1);

特にd3の場合：

// Select all of the 'circle' elements (that is <circle>) elements
// in the HTML document and put the associated data into an array
d3.selectAll("circle")

        // For each circle element, set the Y position to be the result
        // of calling percent_scale on the data element late_percent
        .attr("cy",function (d) { return percent_scale(d.late_percent);})

        // For each circle element, set the X position to be the result
        // of calling time_scale on the data element time
        .attr("cx",function (d) { return time_scale(d.time);})

        // For each circle element, set the radius to be 1
        .attr("r",1);

これは、d3で非常に一般的な構成です。最初のステップは常に、変更する要素のセットを定義するための選択を行うことです（この場合は.selectAllです）。その後、要素に必要な変更を実際に実行する追加の呼び出し（この場合は.attr呼び出し）をチェーン化できます。

これにより、データ要素を手動で追跡したり、多くのループを作成したりすることなく、データ駆動型ドキュメント（グラフ、チャートなど）を操作する非常に強力な方法が作成されます。実際、要素の変更を処理するループがコードにある場合は、通常、d3を誤って使用していることがわかります。

Javascriptの経験があまりない場合は、 https://www.dashingd3js.com/ のチュートリアルがd3の使用を開始するのに役立つ場合があります。

37
Bill