d3.js - d3.js: バブル/散布図でのクリック イベント

Question

d3.js でバブル/散布図を使用していますが、円にクリック イベント ハンドラを追加しようとすると、何らかの理由で未定義のエラーが発生します。

クリック ハンドラーを順番に移動しようとしましたが、単純なアラートを試しましたが、同じエラーが発生します。

TypeError: 'undefined' is not a function (near '....on("click", function(d...')

問題はどこだ？

function click(d) {
  svg.selectAll(".active").classed("active", false);
  d3.select(this).classed("active", active = d);
}

function reset() {
  svg.selectAll(".active").classed("active", active = false);
}

function renderBubbleGraph(data){

// define some variables for the bubble chart
    var w = parseInt(mainWidth(), 10),
        h = 500,
        margin = {top: 48, right: 48, bottom: 48, left: 72};

    var svg = d3.select("#chart")
            .append("svg")
            .attr("width", w)
            .attr("height", h);

    var x = d3.scale.linear().domain([0, 50]).range([margin.left, w-margin.right]),
        y = d3.scale.linear().domain([0, 80000]).range([h-margin.bottom, margin.top]);

    var xAxis = d3.svg.axis()
                      .scale(x)
                      .orient("bottom")
                      .ticks(5),

        yAxis = d3.svg.axis()
                      .scale(y)
                      .orient("left")
                      .ticks(10)
                      .tickFormat(function(d) {return abbreviate(d,0,false,'K'); });
    //bubble radius range and scale
    var max_r = d3.max(data.map(
                           function (d) { return d.Size; })),
            r = d3.scale.linear()
                .domain([0, d3.max(data, function (d) { return d.Size; })])
                .range([0, 80]);

    //start drawing the chart
    svg.append("g")
        .attr("class", "axis x-axis")
        .attr("transform", "translate(0, "+(h-margin.bottom)+")")
        .call(xAxis);

    svg.append("g")
        .attr("class", "axis y-axis")
        .attr("transform", "translate("+(margin.left)+", 0)")
        .call(yAxis);    

    svg.append("text")
        .attr("class", "loading")
        .text("Loading ...")
        .attr("x", function () { return w/2; })
        .attr("y", function () { return h/2-5; });

    svg.selectAll(".loading").remove();

    svg.selectAll("circle")
        .data(data)
        .enter()
        .append("circle")
        .attr("class", "bubble")
        .attr("cx", function (d) { return x(d.Number);})
        .attr("cy", function (d) { return y(d.Avg);})
        .transition()
        .duration(800)
        .attr("r", function (d) { return r(d.Size); })
        .on("click", function(d){click(d)});

}
$(document).ready(function() {

    $.getJSON('/data/mydata.json', function(data) {
        renderBubbleGraph(data);
    });

});

ありがとう！