如何使用按钮切换 d3.js 中的 .csv 文件？答案

【问题标题】：How to switch out .csv files in d3.js with a button?如何使用按钮切换 d3.js 中的 .csv 文件？
【发布时间】：2013-12-03 22:04:10
【问题描述】：

我有一系列 .csv 文件（file1.csv file2.csv file3.csv 等）需要通过单击按钮来切换。我的想法是每次单击变量时将其添加 1 并将数字连接到文件名。下面列出了我所拥有的，在第一个脚本中我正在创建按钮的功能，在第二个脚本中我使用 d3.js 来读取 csv 文件。谁能指出我正确的方向？

<script> 
    var ptOne = "films";
    var ptTwo = 1;
    var ptThree = ".csv"
    var fileName = ptOne.concat(ptTwo).concat(ptThree);


    button.on("click", function() {
         ptTwo+1;
    })
</script>
<script>



  d3.csv(fileName, function(data) { 
      var w = 1000;
      var h = 500;
      var padding = 100;

【问题讨论】：

请注意，除非您有无限多的文件，否则您最终会加载一个不存在的文件。遍历一组预定义名称可能更容易。保留一个计数器，然后只需选择下一个数组元素。
我不确定我是否理解这个问题。您当前的解决方案如何不适合您？

标签： javascript csv d3.js state concat

【解决方案1】：

我会创建一个函数来读取 csv 文件，例如：

function readCsv(fileName) {
    d3.csv(fileName, function(data) { 
        var w = 1000;
        var h = 500;
        var padding = 100;
        ...
    }
}

然后在点击时调用函数：

button.on("click", function() {
    ptTwo+1;
    readCsv(ptOne+ptTwo+ptThree)
})

最后我会用第一个 csv 文件初始化页面：

readCsv(ptOne+1+ptThree)

我希望它有所帮助。

【讨论】：