5

これは、d3のいくつかの基本的な機能を示す簡単なページです。データセットを作成しましたvardataset= [3,1,4,1,5]; いくつかの段落と同様にそれを出力したいと思います。データは出ていますが、体の後に！変 ...

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <title> demo project</title>
    <script type="text/javascript" src="d3/d3.v2.js"></script>
</head>
<body>

    <script type="text/javascript">
        d3.select("body").append("p").text("hello!");
        d3.select("p").append("text").text(" hello!!");
        d3.select("body").append("p").text("hello2!");
        d3.select("p:nth-child(3)").append("text").text(" hello2!!");
        var dataset = [3,1,4,1,5];
        d3.select("p:nth-child(3n+1)")
            .data(dataset)
            .enter()
            .append("p")
            .text(function(d) { return d; });
        d3.select("p:nth-child(7n + 1)").append("text").text("hello againss?");
    </script>

</body>
</html>

ページは次のようになります。

ここに画像の説明を入力してください

DOMは次のようになります（データはbody closeタグの後に表示されることに注意してください）。

ここに画像の説明を入力してください

また、d3.select（ "p：nth-​​child（7n + 1）"）。append（ "text"）。text（ "hello againss？"）;という行にも注意してください。すべてのデータの後に印刷することを目的としていましたが、表示されません。

4

1 に答える 1

8

簡単な答えは、あなたの特定のケースでは、enter() の選択parentNodeはdocument(ではなくbody) であるということです。

enter() 選択がどのように見えるかを見るために簡単な例を見てみましょう。p 要素のないボディを持つドキュメントがあるとします。

var ps = d3.select("body").selectAll("p")
    .data([0, 1, 2]);

p 要素がまだ存在しないため、enter() 選択には 3 つの要素があります。入力選択を調べてみましょう:

ps.enter()

内側の配列には、parentNode という名前のプロパティがあることがわかります。selection.append()またはselection.insert( )を使用して新しい要素を追加すると、新しい要素はそのparentNodeの子として作成されます。

したがって、検査ps.enter()[0].parentNodeすると要素が明らかになりbodyます。データ結合では、selectAll の前の選択で parentNode が指定されていることが明らかになりました。上記の場合はそれでしたd3.select("body")。

データ結合で select("body") 部分を省略していたらどうなるでしょうか?

// example of bad data join
var ps2 = d3.selectAll("p")
    .data([0, 1, 2]);

この場合ps2.enter()[0].parentNodeは#document! つまり、この enter() 選択を使用して要素を追加すると、それらはドキュメントの直接の子になります。append メソッドはそれらをドキュメントの最後に追加します。つまり、体の後。

最後のケースは基本的にあなたが遭遇したものです。データ結合と入力式が正しくありません。次のパターンに従う必要があります。

d3.select(parent).selectAll(element)
    .data(data)
  .enter().append(element);

ところで、HTMLtext要素はありません。だから、append("text")意味がないようです。

于 2012-12-10T07:08:04.260 に答える