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

Question

I'm found on the internet a simple example ( http://bl.ocks.org/ndarville/7075823 ) how to convert a .csv file into a table in HTML. 我在互联网上找到了一个简单的示例（ http://bl.ocks.org/ndarville/7075823 ），该示例如何将.csv文件转换为HTML表。 I implemented the same example inside a container and it works really well. 我在容器内实现了相同的示例，并且效果很好。 So, I decided to put its javascript code in an external file in order to be implemented in my application, but it is not working. 因此，我决定将其javascript代码放在一个外部文件中，以便在我的应用程序中实现，但是它不起作用。 I'm wondering why does don't work. 我想知道为什么不起作用。 I would appreciate id anyone could help me because I don't have any kind of experience with D3. 我很高兴有人能帮助我，因为我对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>

Answer 1

Swap the order of the javascript references around. 交换javascript引用的顺序。 myscript.js (where you have the code invoking d3 methods) is dependent on the d3js library so ensure that the d3js library is loaded first as follows: myscript.js（您拥有调用d3方法的代码）依赖于d3js库，因此请确保首先加载d3js库，如下所示：

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

For additional explanation on loading js libraries, read the accepted answer on this SO question: load and execute order of scripts 有关加载js库的更多说明，请阅读以下SO问题的可接受答案：加载和执行脚本顺序

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

问题描述

1 个解决方案

解决方案1
0 已采纳 2017-05-13 16:57:25

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

问题描述

1 个解决方案

解决方案1 0 已采纳 2017-05-13 16:57:25

解决方案1
0 已采纳 2017-05-13 16:57:25