angularjs nvd3 multichart with line and scatterplot not working - angularjs

Question

I'm using multichart with line and scatterplot. The line chart works fine but the scatterplot data does not plot correctly for the x-axis data.
Can someone please provide a working example other than the one on github? Here is the selections:
$scope.options = {
chart: {
type: 'multiChart',
height: 450,
margin: {
top: 30,
right: 60,
bottom: 50,
left: 70
},
color: d3.scale.category10().range(),
//useInteractiveGuideline: true,
duration: 500,
xAxis: {
ticks: 10,
tickFormat: function (d) {
return d3.format(',10d')(d);
}
},
yAxis1: {
ticks: 10,
tickFormat: function (d) {
return d3.format('10d')(d);
}
}
}
};
function generateData() {
var data1 = [{ x: 0, y: 25 }, { x: 25, y: 25 }, { x: 25, y: 0 }];
var data2 = [{ x: 0, y: 50 }, { x: 50, y: 50 }, { x: 50, y: 0 }];
var data3 = [{ x: 0, y: 75 }, { x: 75, y: 75 }, { x: 75, y: 0 }];
var data4 = [{ x: 0, y: 100 }, { x: 100, y: 100 }, { x: 100, y: 0 }];
var scatter = [{ x: 10, y: 30, size: Math.random(), shape: 'circle' }, { x: 20, y: 50, size: Math.random(), shape: 'circle' }, { x: 30, y: 80, size: Math.random(), shape: 'circle' }];
var testdata = [];
testdata.push({ key: 'Stream1', values: data1 });
testdata.push({ key: 'Stream2', values: data2 });
testdata.push({ key: 'Stream3', values: data3 });
testdata.push({ key: 'Stream4', values: data4 });
testdata.push({ key: 'Stream5', values: scatter });
testdata[0].type = 'line';
testdata[0].yAxis = 1;
testdata[1].type = 'line';
testdata[1].yAxis = 1;
testdata[2].type = 'line';
testdata[2].yAxis = 1;
testdata[3].type = 'line';
testdata[3].yAxis = 1;
testdata[4].type = 'scatter';
testdata[4].yAxis = 1;
return testdata;
}

Answer 1

I also encounter this problem, and my workaround is to add a dummy scatter series with the start and end point only, and the series color is transparent.
For example:
line series: 1,2,3,4,5...100
scatter 1: 5, 67, 83
dummy scatter: 1, 100
Then the x-domain of the scatter will scale with the line series