未捕获的语法错误:无法在模块外使用导入语句

时间:2021-05-18 18:41:27

标签: javascript html d3.js

有人可以帮忙吗,我尝试使用 type="module" 和 type="text/javascript" 但机器人似乎无法运行。我该怎么办?

这是我从用户那里接收文件输入的 index.html 页面,数据将被解析为 index.js。

<!DOCTYPE html>
<html>
<head>
  <title>D3 Evalusation</title>

  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.13.5/xlsx.full.min.js"></script

  <script type="module" src="https://unpkg.com/d3@5.6.0/dist/d3.min.js"></script>

  <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<h1 id="header">Import your Data</h1>

<div class="input_form>">
  <form class="input_form" style="border:1px solid #ccc" method="POST">

    <h1>Please insert your data</h1>

    <label id="fname">First Name</label>
    <input type="text" placeholder="John" name="name" required><br/><br/>

    <label id="lname">Last Name</label>
    <input type="text" placeholder="Doe" name="name" required><br/><br/>

    <label id="email">Email</label>
    <input type="text" placeholder="Enter email" name="email" required><br/><br/>

    <label id="phone">Phone No.</label>
    <input type="text" placeholder="Enter phone" name="phone" required><br/><br/>

    <input type="file"  id="upload_file" accept=".xls,.xlsx,.csv"/></br></br>

    <label id="characteristic" >Please choose 1 characteristic to be grouped by</label>
    <div id="columns"></div>

    <div class="clearfix">
      <a href="Homepage.html">
        <button type="button" class="cancelbtn">Cancel</button></a>
      <button type="submit" class="signupbtn">Sample</button>
    </div>

  </form>
</div>
</body>

<script type="text/javascript" src="index.js"></script>
</html>

这是 index.js 文件

 import {
    select
  } from 'd3';

  let selectedFile;

  var upload = document.getElementById('upload_file');
    upload.addEventListener("change",(event)=>{
      selectedFile = event.target.files[0];

      if(selectedFile){
        let fileReader = new FileReader();
          fileReader.readAsBinaryString(selectedFile);
          fileReader.onload = (event) => {
          let data = event.target.result;
          let wb = XLSX.read(data,{type:"binary"});

          wb.SheetNames.forEach(sheet => {
            let dataRow = XLSX.utils.sheet_to_row_object_array(wb.Sheets[sheet]);
            JSON.stringify(dataRow,undefined,4);
          })
            select("column").call(dropdownMenu,{
              options:dataRow.columns
            })
            }
        }
    });


1 个答案:

答案 0 :(得分:-2)

这是 D3 的一个已知问题。试试:

import * as d3 from 'd3';

d3.select(...)