如何将输入文件参数从html页面传递到Javascript

Question

我使用Python Flask创建了一个网络服务器。我的“ index.html”加载一个表。我打算为表的每一行创建一个新的字段“查看结果”。在单击查看结果时，我应该能够可视化数据。我希望文件名（对应于“查看结果”的每个条目）成为javascript的输入文件参数。

文件名应在此处d3.csv("/static/<filename>.csv", function(data){...}传递，该文件属于一个名为view_data.js的文件，并且来自相应文件的数据将在另一个html页面中显示。

我已经准备好index.html页和view_data.js。如何将文件名从index.html页传递到data.js以进行可视化？

目前，我已经将文件名硬编码在view_data.js中。

Answer 1

您是否熟悉javascript中的元素选择器和事件？

一个简单的实现是使用存储在data属性中的文件名来设置单击每个链接时将触发的事件触发器。

<a class="view-trigger" data-filename="filename_1.csv">view result</a>
<a class="view-trigger" data-filename="filename_2.csv">view result</a>

等

您可以在每个链接上使用特定类的名称来设置事件（在示例view-trigger中。

var resultLinks = document.getElementsByClassName(".view-trigger")

for(var i = 0; i < resultLinks.length; i++) {
  (function(index) {
    resultLinks[index].addEventListener("click", function(event) {  
       var filename = event.target.getAttribute('data-filename');
       d3.csv("/static/" + filename + ".csv", function(data){...}        
     })
   })(i);
}

我尚未测试此代码，因此您可能需要根据情况进行修复/调整。如果您不熟悉这些概念，则有必要详细了解它们。

此外，d3.js似乎还附带有执行DOM selection和handling events的实用程序，因此您可能想使用它们。