0

私はd3で遊んでいて、将来の参考のために私のd3の例を示すために非常に単純なページを書こうとしています.

基本的に、私のページには d3 コード (この例では Mike Bostock からの強制レイアウト) の結果が表示され、その下に表示されます。関連する JavaScript を参照用にページに埋め込みます。

JavaScript関数をプルインするための単純なjQuery '.load'スクリプトがありますが、これは正常に機能します。そして、私は Highlight.js を使用して、取り込まれたコードの構文フォーマットを行っています。これも機能します。

現時点では、スクリプトのテキストをロードするボタンと書式設定を行うボタンの 2 つのボタンがあります。これはうまくいきます。

しかし、ページの読み込み時にすべて動作するようにしたいと思います。

テストとして (以下に示すように) 1 つのボタンに 2 つのスクリプトを結合しようとしましたが、構文の強調表示は機能しません。ただし、構文ボタン自体は正常に機能します。

まるで .load イベントの DOM 操作が完了していないかのようです??

どんな助けでも大歓迎です。

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta source="http://codepen.io/planetoftheweb/pen/CdqcD">
    <link rel="stylesheet" href="../styles/style.css">

    <!-- jQuery -->
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

    <!-- Syntax highlighter references -->
    <link rel="stylesheet" href="http://yandex.st/highlightjs/7.3/styles/googlecode.min.css">
    <script src="http://yandex.st/highlightjs/7.3/highlight.min.js"></script>

    <!-- d3 script for this example -->
    <script type="text/javascript" src="JS/new_chart.js"></script>


    <title>Document</title>
    <style>
        body, .stage {
          background: white; 
        }
    </style>

    <script src="../d3.v3.js" charset="utf-8"></script>

    <script>
        function code() {
            show_code();
            format_text();
        }
        function show_code() {
            $('.code pre code').load('JS/new_chart.js');
            $('pre code').each(function(i, e) {hljs.highlightBlock(e)});
        };
        function format_text() {

            $('pre code').each(function(i, e) {hljs.highlightBlock(e)});
        };
    </script>

    </head>
    <body onload = "new_chart()">
    <div class = "page_title">
        <h1>D3 example</h1>
        <h2>Force layout</h2>
    </div>
    <div class = "chart" id ='chart'></div>
    <div class = "code">
        <button id="show_code" onclick="code();">show code</button>
        <button onclick="format_text();">format</button>
        <pre><code>

        </code></pre>
    </div>
</body>
</html>
4

1 に答える 1