重点部分显示错误的图表（NVD3）

Question

我想制作NVD3图表的“linePlusBarWithFocusChart”。 问题是：在关注部分，它显示空项目（在主数据中不存在）。当我删除.x（函数（d，i）{return i}）时，它显示真实的数据，但是错误的xAxis和x2Axis标签。 有人可以告诉我我该如何解决它？ 这是jsFiddle

和我的js代码：

var myData=[ 
{ 
     "Date": "09/17/2013", 
     "Target": "386", 
     "Actual": "346", 
     "Progress": "89.77" 
    }, 
    { 
     "Date": "09/18/2013", 
     "Target": "386", 
     "Actual": "346", 
     "Progress": "89.77" 
    }, 
    { 
     "Date": "09/19/2013", 
     "Target": "386", 
     "Actual": "346", 
     "Progress": "89.77" 
    }, 
    { 
     "Date": "09/20/2013", 
     "Target": "386", 
     "Actual": "346", 
     "Progress": "89.77" 
    }, 
    { 
     "Date": "09/21/2013", 
     "Target": "386", 
     "Actual": "346", 
     "Progress": "89.77" 
    }, 
    { 
     "Date": "10/02/2013", 
     "Target": "419", 
     "Actual": "346", 
     "Progress": "82.52" 
    }, 
    { 
     "Date": "10/03/2013", 
     "Target": "419", 
     "Actual": "346", 
     "Progress": "82.52" 
    }, 
    { 
     "Date": "10/04/2013", 
     "Target": "419", 
     "Actual": "346", 
     "Progress": "82.52" 
    }, 
    { 
     "Date": "10/05/2013", 
     "Target": "419", 
     "Actual": "346", 
     "Progress": "82.52" 
    }, 
    { 
     "Date": "10/06/2013", 
     "Target": "438", 
     "Actual": "370", 
     "Progress": "84.55" 
    } 
]; 

    nv.addGraph(function() { 

     // Catch data from Target column. 
     var result = []; 
     for (var i = 0; i < myData.length; i++) { 
      result.push({ 
      x: (new Date(myData[i].Date)), 
      y: myData[i].Target 
      }); 
     } 

     // Catch data from Actual column. 
     var result1 = []; 
     for (var i = 0; i < myData.length; i++) { 
      result1.push({ 
      x: (new Date(myData[i].Date)), 
      y: myData[i].Actual 
      }); 
     } 

     // Combine two series together. 
     a = [{ 
      key: 'Target', 
      "bar": true, 
      color: '#ff7f0e', 
      values: result 
     }, 
     { 
      key: 'Actual', 
      color: '#007f0e', 
      values: result1 
     }].map(function (series) { 
      series.values = series.values.map(function (d) { return { x: d.x, y: d.y } }); 
      return series; 
     }); 

     // Define chart. 
     var chart = nv.models.linePlusBarWithFocusChart() 
      .margin({ top: 30, right: 60, bottom: 50, left: 70 }) 
      .x(function (d,i) { if(d.x>0){return i;}}) 
      .color(d3.scale.category10().range()); 

     // Determine the first x axis data labels. 
     chart.xAxis.tickFormat(function (d) { 
      var dx = a[0].values[d] && a[0].values[d].x || 0; 
      if (dx > 0) { 

      // Convert gregorian date to persian date. 
      return d3.time.format("%d-%m-%y")(new Date(dx)) 
      } 
      return null; 
     }); 

     // Determine the seconde x axis data labels. 
     chart.x2Axis.tickFormat(function (d) { 
      var dx = a[0].values[d] && a[0].values[d].x || 0; 
      return d3.time.format("%d-%m-%y")(new Date(dx))   
     }); 

     // Determine the y axises data labels format. 
     chart.y1Axis 
      .tickFormat(d3.format(',f')); 

     chart.y3Axis 
      .tickFormat(d3.format(',f')); 

     // Add chart to page. 
     nv.log(a); 
     d3.select('#chart1 svg') 
      .datum(a) 
      .call(chart); 

     nv.utils.windowResize(chart.update); 
    }); 

Answer 1

，我发现自己的答案，只有代码应该做如下修改：

var myData = [{ 
    "Date": "09/17/2013", 
    "Target": "386", 
    "Actual": "346", 
    "Progress": "89.77" 
}, { 
    "Date": "09/18/2013", 
    "Target": "386", 
    "Actual": "346", 
    "Progress": "89.77" 
}, { 
    "Date": "09/19/2013", 
    "Target": "386", 
    "Actual": "346", 
    "Progress": "89.77" 
}, { 
    "Date": "09/20/2013", 
    "Target": "386", 
    "Actual": "346", 
    "Progress": "89.77" 
}, { 
    "Date": "09/21/2013", 
    "Target": "386", 
    "Actual": "346", 
    "Progress": "89.77" 
}, { 
    "Date": "10/02/2013", 
    "Target": "419", 
    "Actual": "346", 
    "Progress": "82.52" 
}, { 
    "Date": "10/03/2013", 
    "Target": "419", 
    "Actual": "346", 
    "Progress": "82.52" 
}, { 
    "Date": "10/04/2013", 
    "Target": "419", 
    "Actual": "346", 
    "Progress": "82.52" 
}, { 
    "Date": "10/05/2013", 
    "Target": "419", 
    "Actual": "346", 
    "Progress": "82.52" 
}, { 
    "Date": "10/06/2013", 
    "Target": "438", 
    "Actual": "370", 
    "Progress": "84.55" 
}]; 

nv.addGraph(function() { 

    // Catch data from Target column. 
    var result = []; 
    for (var i = 0; i < myData.length; i++) { 
    result.push({ 
     x: (new Date(myData[i].Date)), 
     y: myData[i].Target 
    }); 
    } 

    // Catch data from Actual column. 
    var result1 = []; 
    for (var i = 0; i < myData.length; i++) { 
    result1.push({ 
     x: (new Date(myData[i].Date)), 
     y: myData[i].Actual 
    }); 
    } 

    // Combine two series together. 
    a = [{ 
    key: 'Target', 
    "bar": true, 
    color: '#ff7f0e', 
    values: result 
    }, { 
    key: 'Actual', 
    color: '#007f0e', 
    values: result1 
    }].map(function(series) { 
    series.values = series.values.map(function(d) { 
     return { 
     x: d.x, 
     y: d.y 
     } 
    }); 
    return series; 
    }); 

    // Define chart. 
    var chart = nv.models.linePlusBarWithFocusChart() 
    .margin({ 
     top: 30, 
     right: 60, 
     bottom: 50, 
     left: 70 
    }) 
    .x(function(d, i) { 
     if (d.x > 0) { 
     return d.x; 
     } 
    }) 
    .color(d3.scale.category10().range()); 

    // Determine the first x axis data labels. 
    chart.xAxis.tickFormat(function(d) { 
    // Convert gregorian date to persian date. 
    return d3.time.format("%d-%m-%y")(new Date(d)) 
    }); 

    // Determine the seconde x axis data labels. 
    chart.x2Axis.tickFormat(function(d) { 
    return d3.time.format("%d-%m-%y")(new Date(d)) 
    }); 

    // Determine the y axises data labels format. 
    chart.y1Axis 
    .tickFormat(d3.format(',f')); 

    chart.y3Axis 
    .tickFormat(d3.format(',f')); 

    // Add chart to page. 
    nv.log(a); 
    d3.select('#chart1 svg') 
    .datum(a) 
    .call(chart); 

    nv.utils.windowResize(chart.update); 
});