0

これが非常に基本的な質問である場合は、事前に謝罪してください。

D3、Web 用のインタラクティブなデータ視覚化、JavaScript ライブラリに関するこの本を読んでいます
http://chimera.labs.oreilly.com/books/1230000000345/ch06.html#_the_data

まだまだ初心者なので良書だと思います。

以下のコードとここのデモでは、私が理解しているように、「d」は何でも呼び出すことができ、「データセット」配列を参照します。

とにかく、私の質問は以下の例にあります。d はどのようにデータセット配列を参照していますか? また、参照したい別の配列がある場合はどうすればよいでしょうか?

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>D3: A simple scatterplot with SVG</title>
        <script type="text/javascript" src="../d3/d3.v3.js"></script>
        <style type="text/css">
            /* No style rules here yet */       
        </style>
    </head>
    <body>
        <script type="text/javascript">

            //Width and height
            var w = 500;
            var h = 100;

            var dataset = [
                            [5, 20], [480, 90], [250, 50], [100, 33], [330, 95],
                            [410, 12], [475, 44], [25, 67], [85, 21], [220, 88]
                          ];

            //Create SVG element
            var svg = d3.select("body")
                        .append("svg")
                        .attr("width", w)
                        .attr("height", h);

            svg.selectAll("circle")
               .data(dataset)
               .enter()
               .append("circle")
               .attr("cx", function(d) {
                    alert(d); //d here can be anything here EG "p" --> still not sure how it relates to dataset --> what if I had another array that I wanted to reference??-->  
                    return d[0];  //return the 0th element
               })
               .attr("cy", function(d) {
                    return d[1];    //return the 1th element
               })
               .attr("r", 5);

        </script>
    </body>
</html>
4

1 に答える 1

0

それは良い質問です。まず、そのコードで何をしているのか見てみましょう。最初の部分では、DOM の body 要素を選択し、svg コンテナーを追加します。これは次のスニペットにあります。

var svg = d3.select("body")
                        .append("svg")
                        .attr("width", w)
                        .attr("height", h);

次に、データ (この場合は変数データセット) に基づいて svg 円を作成します。それはこのスニペットで行われます:

    svg.selectAll("circle")
       .data(dataset)
       .enter()
       .append("circle")

次に、コードの残りの部分でいくつかの属性を円に与えます。

したがって、データセットをどのように参照するかという質問は、行data(dataset)で回答されています。この行は、変数データセットを使用して円にバインドすることを示しています。したがって、ハットトリックと呼ばれる別のデータセットがある場合は、data(dataset).

Mike Bostock によるチュートリアルThinking with JoinsとHow Selections Workおよび Scott Murray の優れた本をご覧になることをお勧めします。Scott のオンラインチュートリアルをまだ見つけていない場合は、興味があるかもしれません。

于 2013-09-26T03:57:58.280 に答える