Question

我在互联网上找到了一个简单的例子（http://bl.ocks.org/ndarville/7075823）如何将.csv文件转换为HTML格式的表格。我在容器中实现了相同的示例，它工作得非常好。因此，我决定将其javascript代码放在外部文件中，以便在我的应用程序中实现，但它无法正常工作。我想知道为什么不起作用。我很感激id，任何人都可以帮助我，因为我对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

交换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

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

1 个答案: