javascript - 使用 d3.js，如何使用相同的脚本创建具有 3 个数据源的 3 个图表？

Question

假设我有一个带有 #chart1 #chart2 和 #chart3 的 index.html

我想用三个不同的数据文件填充这三个图表，但使用相同的脚本。

目前，我只是在脚本文件中将脚本复制了 3 次，并进行了必要的更新(即将 #chart1 替换为 #chart2，将 1.tsv1 替换为 2.tsv 等...

我怎样才能更智能/优雅地做到这一点？

Answer 1

Mike Bostock 的精彩教程概述了一种可能的方法，可以在这里找到:Towards Reusable Charts

为了尝试进行简要总结，它提出了一种定义可重用图表的标准方法，该方法非常适合 D3 处理数据和选择的方式。首先定义图表:

function reusableChart() {
  //variables, etc.

  function my() {
    // chart generation code
  }

  //getter-setter methods

  return my;
}

然后，您将实例化此图表生成器，选择元素并以通常的 D3 方式将数据绑定(bind)到它们，最后调用生成器函数:

var myChart = reusableChart().setValue("example", 0);

d3.tsv("1.tsv", function(error, data) {
  d3.select("#chart1").datum(data).call(myChart);
});
//etc..