再利用可能なチャート関数を作成しました (Mike Bostock への帽子のヒント - http://bost.ocks.org/mike/chart/ ):
function chartBubble() {
var width = 800,
height = 800;
function chart() {
var svg = d3.select("#chart").append("svg")
.attr("width", width)
.attr("height", height);
// generate rest of chart here
}
chart.width = function(value) {
if (!arguments.length) return width;
width = value;
return chart;
};
return chart;
}
これは、関数を呼び出すことにより、最初はうまく機能します。
d3.csv("data.csv", function (data) {
d3.select("#chart")
.datum(data)
.call(chartBubble().width(800));
});
重複した svg チャート オブジェクトを作成する問題は、次のように呼び出して幅を変更したいときに発生します。
$("#button").click(function(){
d3.select("#chart")
.call(chartBubble().width(500));
});