Question

我有一个按年份过滤然后按组嵌套的数据。前几年有一组，而其余的年份则有七到八组线。除了线条，我还绘制了实际数据的点。这是2007年的情节，其中只有一组：
[2007线图] [1] 请注意，y轴丢失了，只显示了点，但没有线。

这是2010年的情节，分为八组：
[2010线图] [2] 注意y轴，所有点和线都在显示。

这是相关的代码：

定义线

  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 + ")");

菜单选择

     // 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);
        }

更新功能按组过滤年份和巢穴，然后绘制线和点

            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);

在选择年份之间重置图表

            // 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

使用浏览器检查器跟踪数据输入和退出时，我发现两种情况下的数据都按预期方式移入和移出。观察点数据是使用line.x（）和line.y（）传递的，因此很奇怪，该行在2007年和其他类似年份中没有显示一组。

对于解决此错误的任何帮助，我们将不胜感激。谢谢。

d3.js行未显示部分已过滤然后嵌套的数据

0 个答案: