0

d3js doc には、W3C セレクター仕様を使用して DOM 内のオブジェクトを選択できると書かれています。以下の単純なコードが機能しないのはなぜですか? 実際には何も表示されません。たとえば、セレクターをボディに置き換えると機能します。ただし、特定の div またはボディ内のマークアップをターゲットにする場合はそうではありません。

            <html>
                <head>
                    <link rel="stylesheet" href="style.css">
                    <script type="text/javascript" src="jquery-1.8.2.min.js"></script>
                    <script type="text/javascript" src="d3.v2.min.js"></script>
                    <title>Bleech</title>
                </head>
            <body>
                <script type="text/javascript">
                    var dataset = [ 25, 7, 5, 26, 11, 8, 25, 14, 23, 19,
                            14, 11, 22, 29, 11, 13, 12, 17, 18, 10,
                            24, 18, 25, 9, 3 ];

                    d3.select("#chart").selectAll("p")
                                        .data(dataset)
                                        .enter()
                                        .append("div")
                                        .transition()
                                        .ease("linear")
                                        .attr("class", "bar")
                                        .duration(500)
                                        .style("height", function(d){
                                                return 10 * d;
                                            })
                                        .text(function(d){return d;});
                </script>

                <div id="chart"></div>

            </body>
            </html>
4

2 に答える 2

3

d3はわかりませんが、レンダリングされる前にdivでこれらのメソッドを呼び出すのはなぜですか? 次のように、呼び出しをwindow.onloadイベントまたは jQuery内に配置することをお勧めしdocument.readyます (ライブラリが含まれていることがわかります)。

$(document).ready(function () {
    var dataset = [ 25, 7, 5, 26, 11, 8, 25, 14, 23, 19, 14, 11, 22, 29, 11, 13, 12, 17, 18, 10, 24, 18, 25, 9, 3 ];
    d3.select("#chart").selectAll("p")
                       .data(dataset)
                       .enter()
                       .append("div")
                       .transition()
                       .ease("linear")
                       .attr("class", "bar")
                       .duration(500)
                       .style("height", function(d){
                               return 10 * d;
                           })
                       .text(function(d){return d;});
});
于 2012-10-16T17:08:19.557 に答える
1

$document.ready 関数で d3/js コードをラップする Ian が提案したように、ページが読み込まれた後に d3 が確実に実行されますが、jQuery を必要とするオーバーヘッドが追加されます。

もう 1 つの方法は、単純に <div id="chart"> 行を <script> コードの上に移動することです。

<div id="chart"></div>
<script type="text/javascript">
...
d3.select("#chart").selectAll("p")
...
</script>

Mike Bostock (D3 の作成者) のすべての例で、彼は後者を使用しています (つまり、d3 と jQuery を混在させる傾向はありません)。

于 2015-08-11T07:33:21.060 に答える