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

With d3.js, how can I use the same script to create 3 charts with 3 datasources?

本文关键字：3个 创建 脚本 数据源 js d3 何使用 使用      更新时间：2023-09-26

想象一下，我有一个带有#chart1#chart2和#chart3的index.html

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

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

我如何才能更聪明/更优雅地做到这一点？

Mike Bostock的一个优秀教程概述了一种可能的方法，可以在这里找到：走向可重用图表

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

function reusableChart() {
  //variables, etc.
  function my() {
    // chart generation code
  }
  //getter-setter methods
  return my;
}

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

var myChart = reusableChart().setValue("example", 0);
d3.tsv("1.tsv", function(error, data) {
  d3.select("#chart1").datum(data).call(myChart);
});
//etc..
相关文章：