plugins - d3 プラグインの作り方

Question

シンプルな d3 プラグインを作成したいのですが、その方法に関する情報が見つかりません。

それは非常に単純である必要があります:

s.append('text').text("Some Text").editable();

に変換するだけです

s.append('text').text("Some Text").attr('data-editable', true);

どうすればいいですか？

Answer 1

ソースを掘り下げる必要がありましたが、最終的に取得しました。

(function() {
  d3.selection.prototype.editable = function() {
    return this.attr('data-editable', true);
  };
})();

ジェスビンはこちら

また、プラグインも適用したい場合.enter()は、 を割り当てる必要があることに注意してくださいd3.selection.enter.prototype。

（私の場合のように）両方のシナリオでプラグインを利用したい場合：

(function() {
    d3.selection.prototype.editable = d3.selection.enter.prototype.editable = function() {
        return this.attr('data-editable', true);
      };
})();

Answer 2

Mike Bostockは、再利用可能なグラフに向けてhttp://bost.ocks.org/mike/chart/を作成しました。

このパターンに従って、非常に単純なd3プラグインの例を作成しました。次のブロックを参照してください：http：//bl.ocks.org/cpbotha/5073718（およびソースの要点：https ：//gist.github.com/cpbotha/5073718 ）。

Mike Bostockによると、再利用可能なチャートは「ゲッターセッターメソッドを使用したクロージャ」として実装する必要があります。上記の例では、まさにそれを実行しました。

@Wexの回答もこのパターンに従いますが、元の質問ではプロパティの要求が指定されていないため、クロージャーのアイデアが示されていません。

Answer 3

私がそれを文書化したのを見た方法：

function editable() {
    d3.select(this).attr("data-editable", true);
}

に続く：

s.append('text').text("Some Text").call(editable);

また

d3.selectAll("text").each(editable);

私はジョージの解決策の方が好きですが。