1

初心者の d3.js に関する質問があります。多くのチュートリアル入力を入力しようとしましたが、表示出力が機能しないようです。これが一例です。d3.js ページ テンプレートの例があります (Scott Murray の D3 ブックから)。

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>D3 Page Template</title>
        <script type="text/javascript" src="d3/d3.v3.js"></script>
    </head>
    <body>
        <script type="text/javascript">
            // Your beautiful D3 code will go here
        </script>
    </body>
</html>

そこで、http: //www.recursion.org/d3-for-mere-mortals/にアクセスして、D3 コンテナーに最初のコード例を入力してみます。

var rectDemo = d3.select("#rect-demo").
  append("svg:svg").
  attr("width", 400).
  attr("height", 300);

rectDemo.append("svg:rect").
  attr("x", 100).
  attr("y", 100).
  attr("height", 100).
  attr("width", 200);

Web でソースを探して、HTML ファイル内で D3 コードを正確に構造化する方法を調べましたが、残念ながら、ほとんどすべてのチュートリアルでは、関連するコード行をどこに配置すればすべてが機能するかを知っていることを前提としています。ブラウザ。この一般的な問題は、私がこの数週間、着手する際に悩まされてきました。

コンテナに上記を入力すると、出力が得られませんでした:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>D3 Page Template</title>
        <script type="text/javascript" src="d3/d3.v3.js"></script>
    </head>
    <body>
        <script type="text/javascript">
            // Your beautiful D3 code will go here
            // http://www.recursion.org/d3-for-mere-mortals/
            var rectDemo = d3.select("#rect-demo").
              append("svg:svg").
              attr("width", 400).
              attr("height", 300);

            rectDemo.append("svg:rect").
              attr("x", 100).
              attr("y", 100).
              attr("height", 100).
              attr("width", 200);
        </script>
    </body>
</html>

この例を表示するために、これがなぜなのか、そして私がしなければならないことを誰かが簡単に説明できますか? どうもありがとう！私は一日中、例を表示し、小さな変更を加えて、コピーして貼り付けた例の出力を消えさせようとしてきました!

4

2 に答える 2

3

問題は、最初の「エントリ ポイント」、つまり D3 がすべてを追加する要素です。HTML テンプレートでは、要素の本文には何もありませんが、D3 コードでは、すべてを追加するために ID "rect-demo" を持つ要素を選択しています。この要素は存在しないため、何も起こりません。

したがって、これを機能させるには 2 つの選択肢があります。この ID を持つ要素を HTMl テンプレートに追加するか、D3 にbody.

オプション1：

<body>
<div id="rect-demo"></div>
// etc

オプション 2:

var rectDemo = d3.select("body").
// etc

一般的に、D3 の最新バージョンでは、追加された要素の名前空間を明示的に指定する必要はありません (あいまいな場合を除きます)。つまり、代わりに.append("svg:rect")単純に.append("rect").

于 2013-10-20T19:44:13.480 に答える
0

Chrome を使用している場合は、ローカル サーバーでファイルを実行する必要があります。Mac を使用している場合は、Apache サーバーが組み込まれているか、Windows 用のMAMPやXAMPPなどを入手できます。file://ただし、Firefox はURL を使用して D3 をレンダリングするので、これが最も迅速な修正になることに気付きました。Firefoxを使用してください。:)

于 2013-10-20T19:31:15.713 に答える