Javascript Can'；带D3.js的t色气泡图

我试图绘制一个气泡图（代码中的caChart），但由于函数（函数（p，v））返回null；泡沫总是黑色的。你能告诉我我的功能有什么问题吗？如果您能与我分享如何实现点击每个气泡，以便我可以转发到另一个页面（每个气泡不同），我也将非常感激？ 这是我的密码：

      var numberFormat = d3.format(".2f");

    var caChart = dc.bubbleOverlay("#ca-chart")
            .svg(d3.select("#ca-chart svg"));

    var incidentChart = dc.barChart("#incident-chart");

    var homicideChart = dc.lineChart("#homicide-chart");

    function isTotalCrimeRateRecord(v) {
        return v.type == "Total, all violations" && v.sub_type == "Rate per 100,000 population";
    }

    function isTotalCrimeIncidentRecord(v) {
        return v.type == "Total, all violations" && v.sub_type == "Actual incidents";
    }

    function isViolentCrimeRateRecord(v) {
        return v.type == "Total violent Criminal Code violations" && v.sub_type == "Rate per 100,000 population";
    }

    function isViolentCrimeIncidentRecord(v) {
        return v.type == "Total violent Criminal Code violations" && v.sub_type == "Actual incidents";
    }

    function isHomicideRateRecord(v) {
        return v.type == "Homicide" && v.sub_type == "Rate per 100,000 population";
    }

    function isHomicideIncidentRecord(v) {
        return v.type == "Homicide" && v.sub_type == "Actual incidents";
    }

     function isNumberOfCalls(v) {
        return v.type == "Homicide" && v.sub_type == "Actual incidents";
    }






    d3.csv("test445_9.csv", function(data) {
               var facts = crossfilter(data);
var dtgFormat = d3.time.format("%d/%m/%y %H:%M").parse;


         data.forEach(function(d) { 
    d.date = dtgFormat(d.date); 
    d.totalCalls = d.NC;
    d.totalErrors = d.SR;

          });




        var dateDim = facts.dimension(function(d) {return d.date;});
                var minDate = dateDim.bottom(2)[0].date;
var maxDate = dateDim.top(1)[0].date;
        var totalByYear = dateDim.group().reduceSum(function (d) { return d.totalCalls;});

        var totalByYear_2 = dateDim.group().reduceSum(function (d) { return d.totalErrors;});


         function isLength(v) {
        return +v.NC;
    }









    function print_filter(filter){
    var f=eval(filter);
    if (typeof(f.length) != "undefined") {}else{}
    if (typeof(f.top) != "undefined") {f=f.top(Infinity);}else{}
    if (typeof(f.dimension) != "undefined") {f=f.dimension(function(d) { return "";}).top(Infinity);}else{}
    console.log(filter+"("+f.length+") = "+JSON.stringify(f).replace("[","[\n\t").replace(/}\,/g,"},\n\t").replace("]","\n]"));
} 



         var cities= facts.dimension(function(d) {
            return d.city;
        });





        var cityGroup = cities.group();


        var cityDimensionGroup = cities.group().reduce(
        //add
        function(p,v){
         if(isLength(v)>1)
         {
            ++p.count; 
             }

            p.calls_sum += +v.NC;
            p.errors_sum += +v.SR;
            p.calls_avg = p.calls_sum / p.count;

            p.callsRatio = (p.errors_sum / p.calls_sum) * 100;
                print_filter(p.callsRatio);
            return p;
        },
        //remove
        function(p,v){
         if(isLength(v)>1)
         {
             --p.count;

             }

            p.calls_sum -= +v.NC;
            p.errors_sum -= +v.SR;
            p.calls_avg = p.calls_sum / p.count;
            p.callsRatio = (p.errors_sum / p.calls_sum) * 100;
            print_filter(p.callsRatio);
            return p;
        },
        //init
        function(p,v){
            return {calls_sum: 0, callsRatio: 0};
        }
    );
            print_filter("cityDimensionGroup");
        caChart.width(550)
                .height(700)
                .dimension(cities)
                .group(cityDimensionGroup)
                .radiusValueAccessor(function(p) {
                    return p.value.calls_sum;

                })
                .r(d3.scale.linear().domain([0, 17000]))

                .colors(["#ff7373","#9999FF","#66FF33","#FF3399","#CC3300"])
                .colorDomain([1, 60])
                .colorAccessor(function(p) {
                    return p.value.callsRatio;
                })
                .title(function(d) {
                    return "City: " + d.key
                            + "\nTotal of calls: " + numberFormat(d.value.callsRatio)

                })
                .point("Maskat", 460,200)
                .point("Az-Zahira", 280,280)
                .point("Al-Batina", 400,200)
                .point("Dhofar", 190,550)
                .point("Al-Wusta", 350,400)
                .point("Al-Dachiliyya", 370,280)
                .point("Al-Dachiliyya2", 380,295)
                .debug(false);





       incidentChart
                .width(580)
                .height(750)
                .margins({top: 130, right: 30, bottom: 20, left: 30})
                .dimension(cities)
                .group(totalByYear, "Number of calls")
                .stack(totalByYear_2, "SR%")
                .x(d3.time.scale().domain([new Date('2014, 11, 24'), new Date('2014, 11, 27')]))
                .renderHorizontalGridLines(true)
            .ordinalColors(["#4FDB95","#F06C7B"])
                 .elasticY(true)
                .brushOn(false)
       .legend(dc.legend().x(8).y(10).itemHeight(25).gap(34))




   //different for x-axis label

                incidentChart.xUnits(function(){return 10;});












        dc.renderAll();
    });

以下是我的数据：

city,date,NC,SR,CELLID

Maskat,25.11.14 00:00,1,3,117

Az-Zahira,25.11.14 00:00,1,3,333

Az-Zahira,25.11.14 00:00,1,3,333

Az-Zahira,25.11.14 00:00,40,3,333

---

设置一个工作的JSFIDLE，我们可以对其进行编辑以查看问题所在。确保包含对D3的引用：）嗨，我已经添加了，但无法在那里获取图表，JS Fiddle中唯一不同的是我将数据添加到脚本中，而在本地我直接从CSV文件（）获取数据