带有线条和散点图的angularjs nvd3多图不起作用答案

【问题标题】：angularjs nvd3 multichart with line and scatterplot not working带有线条和散点图的angularjs nvd3多图不起作用
【发布时间】：2016-05-16 17:53:13
【问题描述】：

我正在使用带有折线图和散点图的多图。折线图工作正常，但散点图数据无法正确绘制 x 轴数据。

有人可以提供除 github 上的示例之外的工作示例吗？以下是选择：

$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;
            }

【问题讨论】：

我发现如果任一图表的 x 值与另一个图表的 x 值不匹配，x 轴总是不正确，这真的很烦人。一个非常丑陋的解决方法是匹配任一数据中的 x 值，以便每个 x 值都存在于两个系列中。

标签： angularjs nvd3.js scatter-plot linechart

【解决方案1】：

我也遇到这个问题，我的解决方法是添加一个只有起点和终点的虚拟散点系列，并且系列颜色是透明的。

例如：线系列：1,2,3,4,5...100 分散 1: 5, 67, 83 虚拟分散：1, 100

那么散点图的x域会随着线系列缩放

【讨论】：