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方式将数据绑定到它们，最后调用生成器函数：

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

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

使用d3.js，如何使用相同的脚本创建包含3个数据源的3个图表？

1 个答案: