NVD3 chart: Plot toggle with muiltiChart / multiple yScales causes axis to disappear, but not the plot

Question

I'm trying to get two lines to use two different scales.

When I try to toggle a plot, the grid lines disappear, instead of the plot.

Can you figure out what I'm doing wrong?

http://jsfiddle.net/3ZP3S/

var dataset1 = {
    values : [],
    key : "Math.cos",
    type: "line",
     color: '#2ca02c',
    yAxis: 1
};

var dataset2 = {
    values : [],
    key : "sin",
    type: "line",
    color : "#ff7f0e",
    yAxis: 2
};

for (var i = -3.14; i < 3.1415; i+= .01){
    dataset1.values.push( { x: i , y : Math.cos(i) });
    dataset2.values.push( { x: i , y : Math.sin(i) * 3  });
}

var data = [dataset1, dataset2];

nv.addGraph( function() {
    var chart = nv.models.multiChart()
    .margin({top: 30, right: 60, bottom: 50, left: 70})
    .color(d3.scale.category10().range());

    chart.xAxis
    .tickFormat(d3.format(',.2f'));

    chart.yAxis1
    .tickFormat(d3.format(',.1f'));

    chart.yAxis2
    .tickFormat(d3.format(',.1f'));

    d3.select('#chart svg')
      .datum(data)
      .transition().duration(500).call(chart);

    return chart;
});

Answer 1

This was a bug with nvd3. I tried several "previous" versions of nvd3, and d3, and this always occurred.

We also decided to drop nvd3 and switch to C3.js, which seems to be "much" more mature in terms of stability...