使用 d3 和外部 javascript 文件的 CSV 到 HTML 表答案

【问题标题】：CSV to HTML table using d3 and an external javascript file使用 d3 和外部 javascript 文件的 CSV 到 HTML 表
【发布时间】：2017-05-13 14:29:11
【问题描述】：

我在 Internet 上找到了一个简单示例 (http://bl.ocks.org/ndarville/7075823)，如何将 .csv 文件转换为 HTML 表格。我在容器中实现了相同的示例，并且效果非常好。所以，我决定将它的 javascript 代码放在一个外部文件中，以便在我的应用程序中实现，但它不起作用。我想知道为什么不起作用。如果有人可以帮助我，我将不胜感激，因为我对 D3 没有任何经验。

//-------------------------file myscript.js -------------------------------------//
function sTest(){


        d3.text("data.csv", function(data) {
            var parsedCSV = d3.csv.parseRows(data);

            var container = d3.select("#dataTable")
                .append("table")

                .selectAll("tr")
                    .data(parsedCSV).enter()
                    .append("tr")

                .selectAll("td")
                    .data(function(d) { return d; }).enter()
                    .append("td")
                    .text(function(d) { return d; });
}

//----------------------------file index.html -------------------------
<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet"     href="https://www.w3schools.com/w3css/4/w3.css">
    </head>
    <body>
        <script src="myscript.js"></script>
        <script src="http://d3js.org/d3.v3.min.js"></script>
        <div class="w3-container w3-cell-row w3-lobster">
            <p class="w3-xxlarge">Data Table:</p>
        </div> //container where should be contained a table
        <div style="height:350px;" class="w3-cell-row">
            <div id="dataTable" class="w3-container w3-cell w3-center w3-cell-middle  w3-border w3-border-blue w3-round-xlarge"> 
            </div>
            <div style="width:320px;" class="w3-container w3-cell w3-cell-middle w3-border w3-border-green w3-round-xlarge">
                 <table class="w3-table w3-bordered">
                    <tr>
                        <th>$$Resistor\,(R):$$</th>
                    </tr>
                    <tr>
                        <td><center><input type="number" style="text-align:center" id="Res" value="0" >
                        <label  style="font:16px">$$\Omega$$</label></center></td>
                    </tr>
                    <tr>
                        <th>$$Resistor\,(R_B):$$<th>
                    </tr>
                    <tr>
                        <td><center><input type="number" style="text-align:center" id="Resb" value="0">
                        <label  style="font:16px">$$\Omega$$</label></center></td>
                    </tr>
                    <tr>
                        <th>$$Resistor\,(R_C):$$</th>
                    </tr>
                    <tr>
                        <td><center><input type="number" style="text-align:center" id="Resc" value="0">
                        <label  style="font:16px">$$\Omega$$</label></center></p></td>
                    </tr>
                 </table>
            </div>
        </div>
        <p align="center"><input type="button" name="start"  id="start" value="Start" onclick="sTest()" style="color:#00cc00">
    </body>
</html>

【问题讨论】：

将“myscript.js”放在正文的底部，之后带有dataTable ID 的div。

标签： javascript html csv d3.js

【解决方案1】：

交换 javascript 引用的顺序。 myscript.js（您有调用 d3 方法的代码）依赖于 d3js 库，因此请确保首先加载 d3js 库，如下所示：

<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="myscript.js"></script>

有关加载 js 库的更多说明，请阅读此 SO 问题的已接受答案： load and execute order of scripts

【讨论】：