4

次のコードを展開して、div.someclass存在しない場合に自動的に作成する簡単な方法はありますか?

d3.select("body").select("div.someclass").selectAll("p")
    .data([ 1, 2, 3 ])
    .enter()
        .append("p")
        .text(function (d, i) {
            return "index: " + i + ", value: " + d;
        });

私はまだ D3JS の学習の初期段階にあります。これまでの私の理解では、「D3 に何かを行う方法を伝えるのではなく、D3 に自分のやりたいことを伝える」ということです。したがって、上記のコード<div class="someclass"></div>を HTML で宣言する必要があることに驚きました。

別の方法は、プログラムで div を挿入することです。

/** Append HTML placeholder programmatically **/
placeholder = d3.select("body").append("div").attr("class", "someclass");

/** Bind the data to the DOM **/
/** instead of telling D3 how to do something, tell D3 what you want: in the absence of <p>, this will return a virtual selection **/
placeholder.selectAll("p")
    .data([ 1, 2, 3 ])
    .enter()
        .append("p")
        .text(function (d, i) {
            return "index: " + i + ", value: " + d;
        });

より短い/より良い方法はありますか?

4

2 に答える 2

12

私の理解が正しければ、div.someClass存在しない IFF を追加する方法を尋ねています。少し奇妙ですが、これには D3 パターンがあります。

// create a selection for the container with a static 1-element array
var container = d3.select("body").selectAll("div.someclass")
    .data([0]); 

// now add it if it doesn't exist
container.enter().append('div').attr('class', 'someclass');

// now use it for the subselection
container.selectAll("p")
    .data([1, 2, 3]);

// etc

ここでの奇妙な点は.data([0])、0これは慣習的なものであり、必須ではありません。これは、静的な単一要素の配列である可能性があります。これが最初に呼び出されたときに、新しい要素が作成されます (他の要素がdiv.someclass最初に作成されない限り)。2 回目は、要素が既に存在するため、.enter()選択は行われず、それ以上追加されることはありません。

これは、更新時に繰り返し呼び出される再利用可能なコンポーネントではかなり一般的なパターンです。例についてはd3.svg.axisコードを参照してください。

于 2013-10-31T21:36:11.870 に答える