使用d3.js時，如何使用相同的腳本創建3個包含3個數據源的圖表？

Question

想象一下，我有＃chart1＃chart2和＃chart3的index.html

我想用三個不同的數據文件填充這三個圖表，但使用相同的腳本。

目前我只是有劇本在我的腳本文件複製3次，用必要的更新做出（即交換出去＃chart2和1.tsv1爲2.tsv等等＃chart1 ...

哪有我這樣做更明智/優雅

Answer 1

由邁克·博斯托克的優秀教程概述這樣做的一種可能的方法可以在這裏找到：Towards Reusable Charts

要嘗試並簡要總結，提出定義可重複使用的圖表的標準方法這很適合D3處理數據和選擇的方式。首先你定義你的cha RT：

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..