无法用D3.js为气泡图着色

Question

我试图绘制一个气泡图（代码中的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