第一个解决方案（就地）

Question

我有4-5个html文件，基本上用D3.js读入csv文件并将它们转换成表格。问题是每个html文件使用完全相同的代码，只读取不同的csv文件。因此，每个.html代码中唯一的一个就是这一行：

d3.csv("../reservations/arc.csv", function(error, data)

我猜这不是实现这一目标的唯一方法。如果我的问题有点令人困惑，我很抱歉。我不完全确定我是否已经明确表达了我所寻求的内容，但请告诉我任何必要的澄清。

以下是网站上所有网页的布局：

当我点击链接时，脚本应该加载相应的csv。

我假设我需要使用上面的代码制作模板，然后将参数传递到该行d3.csv（csv），但我真的不确定如何。正如我所看到的，这是一个简单的方法。

以下是index.html页面的内容：

<head>
<title>AWS EC2 Instances</title>
 <script     src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script>
$(function(){
  $("#includedContent").load("date.html");
});
    </script>
</head>
<html>
<h1>Show EC2 Instances, Owners & Reservation Status</h1>

<h2>Account</h2>
<ul>
    <li><a href="/resdisplay/arc.html">Arc</a> | <a href="/reservations/arc.csv">(Download CSV)</a></li>
    <li><a href="/resdisplay/coral.html">Coral</a> | <a href="/reservations/coral.csv">(Download CSV)</a></li>
    <li><a href="/resdisplay/dw.html">Data Warehouse</a> | <a href="/reservations/dw.csv">(Download CSV)</a></li>
    <li><a href="/resdisplay/elections.html">Elections</a> | <a href="/reservations/elections.csv">(Download CSV)</a></li>
    <li><a href="/resdisplay/enterprise.html">Enterprise</a> | <a href="/reservations/enterprise.csv">(Download CSV)</a></li>
    <li><a href="/resdisplay/inf.html">Inf</a> | <a href="/reservations/inf.csv">(Download CSV)</a></li>
    <li><a href="/resdisplay/main.html">Main</a> | <a href="/reservations/main.csv">(Download CSV)</a></li>
    <li><a href="/resdisplay/news.html">News</a> | <a href="/reservations/news.csv">(Download CSV)</a></li>
    <li><a href="/resdisplay/nile.html">Nile</a> | <a href="/reservations/nile.csv">(Download CSV)</a></li>
    <li><a href="/resdisplay/pci.html">Compliance (PCI)</a> | <a href="/reservations/pci.csv">(Download CSV)</a></li>
    <li><a href="/resdisplay/platform.html">Platform</a> | <a href="/reservations/platform.csv">(Download CSV)</a></li>
    <li><a href="/resdisplay/sandbox.html">Sandbox</a> | <a href="/reservations/sandbox.csv">(Download CSV)</a></li>
    <li><a href="/resdisplay/video.html">Video</a> | <a href="/reservations/video.csv">(Download CSV)</a></li>
</ul>
<p>
<div align="center">

我对html / js不太熟悉，非常感谢你的帮助。谢谢！

编辑 - 我的问题已经分支：

我可以创建一个单独的.js文件来创建表（用作模板），然后在该js文件中创建一个以csv作为参数的函数吗？该函数基本上构建整个表模板。

Answer 1

将点击监听器附加到每个“下载csv”锚点。将this.getAttribute（“href”）交给d3.csv方法。

Answer 2

第一个解决方案（就地）

// collect every link with the .show class
var links = document.querySelectorAll(".show");
// bind an event listener to each
for (var i=0; i<links.length; i++)
{
    links[i].addEventListener("click", function(e)
    {
        // prevent default link behavior
        e.preventDefault();
        // get the path of the file
        var path = e.target.href;
        // use it
        d3.csv(path, function(error, data)
        {
            // insert code here to build the table
        });
    });
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<div id="menu">
  <ul>
    <li><a class="show" href="dir/file1.csv">File 1</a> | <a class="download" href="dir/file1.csv">(Download File 1)</a></li>
    <li><a class="show" href="dir/file2.csv">File 2</a> | <a class="download" href="dir/file2.csv">(Download File 2)</a></li>
    <li><a class="show" href="dir/file3.csv">File 3</a> | <a class="download" href="dir/file3.csv">(Download File 3)</a></li>
  </ul>
</div>
<div id="table">
  <!-- draw the table here -->
</div>

第二个解决方案（单独文件）

<!-- this goes to index.html -->

<ul>
    <li><a class="show" href="table.html?csv=file1" target="_blank">File 1</a> | <a class="download" href="dir/file1.csv">(Download File 1)</a></li>
    <li><a class="show" href="table.html?csv=file2" target="_blank">File 2</a> | <a class="download" href="dir/file2.csv">(Download File 2)</a></li>
    <li><a class="show" href="table.html?csv=file3" target="_blank">File 3</a> | <a class="download" href="dir/file3.csv">(Download File 3)</a></li>
</ul>



<!-- this goes to table.html -->

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>

<script>
// bind an event listener to run the script right after the page is loaded
window.addEventListener("DOMContentLoaded", function()
{
  // get the whole query part of the URL
  var query = location.search;
  
  // strip the "?" char from the beginning
  query = query.slice(1);
  
  // check if there are multiple queries (make it foolproof)
  var queryArray = query.split("&");
  
  // check if there is a query with the "csv" property
  var file;
  for (var i=0; i<queryArray.length; i++)
  {
    // does it start with "csv="?
    if (queryArray[i].slice(0, 4) === "csv=")
    {
      // if it does, get the rest of the string
      file = queryArray[i].slice(4);
    }
  }
  
  // now you have the file name, let's create a path
  var path = "dir/"+file+".csv";
  
  // then build the table
  d3.csv(path, function(error, data)
  {
    // insert code here to build the table
  });
});
</script>

Answer 3

您可以使用以下代码，不需要服务器端代码。关键是使用查询字符串将文件名传递给d3 html页面。

＆＃13;

<!-- index.html -->
<ul>
  <li><a href="resdisplay/display.html?name=arc">Arc</a> | <a href="/reservations/arc.csv">(Download CSV)</a></li>
  <li><a href="resdisplay/display.html?name=coral">Coral</a> | <a href="/reservations/coral.csv">(Download CSV)</a></li>
</ul>

<!-- display.html -->
<script>
    // Get file name from the query string
    function getParameterByName(url, name) {
        if (!url) url = window.location.href;
        name = name.replace(/[\[\]]/g, "\\$&");
        var regex = new RegExp("[?&]" + name + "(=([^&#]*)|&|#|$)"),
            results = regex.exec(url);
        if (!results) return null;
        if (!results[2]) return '';
        return decodeURIComponent(results[2].replace(/\+/g, " "));
    }
    
    var fileName = getParameterByName(window.location.href, "name");    
    d3.csv("../reservations/" + fileName + ".csv", function(error, data) { ... });
    
</script>

＆＃13;

如何避免HTML代码冗余 - 不要为多个html文件使用相同的代码

3 个答案:

第一个解决方案（就地）

第二个解决方案（单独文件）