d3.js lines not showing for part of filtered then nested data

18 Views Asked by At

I have a data that is filtered by year then nested by group. The first few years there is one group, while the remaining years have seven to eight groups for which the lines are plotted. Along with lines I also plot points of actual data. here is the plot for the year 2007 that has only one group:
[2007 line plot][1] Notice the y-axis is missing and only the points are showing but no lines.

Here is the plot for the year 2010 that has eight groups:
[2010 lines plot][2] Notice the y-axis, all points and lines are showing.

Here is the associated code:

Defining line

  var line = d3.svg.line()
                    .x(function(d) { return LoanAmount_scale(d['amount_mean']); })
                    .y(function(d) { return Investor_scale(d['Investors_mean']); });

       var svg =  d3.select("body")
                     .append("svg")
                     .attr("width", width + margin.left + margin.right )
                     .attr("height", height + margin.top + margin.bottom);

        var plot =  svg.append("g")
                       .attr("class", "chart")
                        .attr("width" , width- margin.left)
                        .attr("height", height)
                        .attr("transform","translate ("+ margin.left + "," + margin.top + ")");

menu selection

     // setting stage for dropdown menu 
          // years
        var years = ['Select Year']; 
        var i= 2006;    
        for( i = 2006; i<= 2014; i++){
            years.push(i);
        }

         // selecting an option
        var select = d3.select('body')
                       .append('select')
                       .attr('class','select')
                       .attr('id','select_id')
                       .on('change',change);

          // available options on dropdown menu
        var option = select.selectAll('option')
                            .data(years)
                            .enter()
                            .append('option')
                            .text(function(d){ return d});

        // menu selection of year  
        function change(){
            var select_year = d3.select('select')
                             .property('value')
            // reset chart before updating year
            update(data,'Select Year');
            // update year 
            update(data,select_year);
        }

Update function filters year and nests by group, then plots lines and points

            function update(data, year){
             var Filtered = data.filter(function(d){ return d["LoanOrig_Yr"] == year});

             var nested_by_rating = d3.nest()
                              .key(function(d) { 
                                   return d['ProsperRating']
                              }).sortKeys(d3.ascending)
                               .entries(Filtered);

             // add lines for each rating    
            var lines =  plot.selectAll("path")
                              .data(nested_by_rating)

             // remove old lines
            lines.exit().remove();  


           plot.selectAll("circle")
                    .data(nested_by_rating)
                    .exit().remove();

            nested_by_rating.forEach( function(d,i){

               var prosperR = d.key
              // entering data
                 lines.enter()
                      .append("path")
                      .attr("class", "line")
                      .attr("d", line(d.values))
                      .attr("stroke", RatingColor(prosperR))
                       .attr("stroke-width", 3)
                       .attr("stroke-opacity",0.3)
                       .attr("fill","none");
               debugger;
                plot.selectAll("path.dot")
                    .data(d.values)
                    .enter().append("circle")
                    .attr("class", "dot")
                    .attr("cx", line.x())
                    .attr("cy", line.y())
                    .attr("r", 3.5)
                    .attr("fill","Black");
                debugger;
                // dynamic legend
                    svg.append("text")
                        .attr("x", 1300) 
                        .attr("y", 100 + i*20)
                        .attr("class", "legend")    // style the legend
                        .style("fill", function() { // Add the colours dynamically
                            return d.color = RatingColor(prosperR); })
                        .text(prosperR); 

Reset chart between year selection

            // reseting chart between years 
            if (year == 'Select Year'){ 
                gX.call(xAxis); 
                gY.call(yAxis);

                svg.append("text")
                        .attr("x", 1300) 
                        .attr("y", 100)
                        .attr("class", "legend")    // style the legend
                        .style("fill", "white")
                        .text(["NR"]);

                svg.selectAll("legend_text")
                            .data(["1.AA","2.A","3.B","4.C","5.D","6.E","7.HR","NR"])
                            .enter()
                            .append("text")
                            .attr("class","legend")
                            .attr("x", 1300) 
                            .attr("y", function(d,i){return 100 + i*20;
                                                    })
                            .attr("class", "legend")    // style the legend
                            .style("fill", "white")
                            .style("stroke","white")
                            .text(function(d,i){return d;});

            } \\ end if statement
       } \\end .forEach statement

When tracking data entry and exit using the browser inspector, I find the data in both cases move in and out as expected. Observe the points data are passed using line.x() and line.y(), so it is very strange that the line does not show in the year 2007 and other similar years with one group.

I would appreciate any help fixing this bug. Thank you.

0

There are 0 best solutions below