-1

次の d3.js コードについていくつか質問があります。彼らの Github といくつかのチュートリアルを参考にしましたが、私は彼らの言語を理解するにはあまりにも馬鹿げています。

d3js の基本を理解している人がいる場合は、以下の質問について簡単に説明してください。

私にリンクを提案しないでください!!!

コードは基本的に次のテーブルを作成します。

これが出力です

var dataset = [],
tmpDataset = [],
i, j;

for (i = 0; i < 5; i++) {
    for (j = 0, tmpDataset = []; j < 3; j++) {
        tmpDataset.push("Row:"+i+",Col:"+j);
    }
    dataset.push(tmpDataset);
}

d3.select("#viz")
    .append("table")
    .style("border-collapse", "collapse")
    .style("border", "2px black solid")

    .selectAll("tr")
    .data(dataset)
    .enter().append("tr")

    .selectAll("td")
    .data(function(d){return d;})
    .enter().append("td")
    .style("border", "1px black solid")
    .style("padding", "10px")
    .on("mouseover", function(){d3.select(this).style("background-color", "aliceblue")}) 
    .on("mouseout", function(){d3.select(this).style("background-color", "white")}) 
    .text(function(d){return d;})
    .style("font-size", "12px");

質問:

  1. selectall("tr")HTML に tr がないのに、なぜそうしているのか? そこにさえない「tr」を選択するポイントは何ですか。

  2. data(dataset)trのために何をしていますか？

  3. data(function(d){return d;})tdとは何ですか? そして、2と3の違いは何ですか？

4

2 に答える 2

0

.selectAll("tr")は、既存のすべての「tr」タグの反復として見ることができます。起こっていることは、これらのtrタグに新しいデータを添付することです。したがって、いくつかのtrタグが既に存在する場合、それらのコンテンツは新しいデータによって生成されたコンテンツに置き換えられます。タグが存在しない場合は、作成されます。

今何が起こっているの.data(array)ですか？arrayこれは、配列ごとに のすべての要素を繰り返し処理し、1 つの要素を生成することを意味します。

DOM と d3.js の例を詳しく見てみることをお勧めします。moonwave99 で提案されているように行を削除して例を試すと、確実に学習が速くなります。

于 2013-06-19T16:55:11.557 に答える