nvd3 折线图中未显示单点

Question

我正在使用以下配置在 angular nvd3 的帮助下显示我的折线图。问题是，在显示图表时，如果边缘附近只有一个点，那么它不会显示，除非将其悬停在上面。

$scope.options = {
        chart: {
            type: 'lineChart',
            forceY:[0],            
            height: 450,
            margin : {
                top: 30,
                right: 70,
                bottom: 68,
                left: 90
            },
            x: function(d){ return d[0]; },
            y: function(d){ return d[1]; },
            useInteractiveGuideline: false,
            xDomain: [moment($scope.calenderStartDate).valueOf(), moment($scope.calenderEndDate).valueOf()],            
            lines:{
                            dispatch: {
                                elementClick: function(e){
                                    console.log(e);
                                    handleDataForTable(e.point.x,e.series.key);
                                    $scope.api.refresh();
                                },
                                elementMouseout: function(){}
                            }
                },
            xScale: d3.time.scale().clamp(true),
            xAxis: {
                tickFormat: function(d){
                    return d3.time.format('%d-%b-%y')(new Date(d))
                },                    
                 rotateLabels:-30

            },

        legend: {
                vers: 'furious'
        },
        showLegend:false,
            yAxis: {
                axisLabel: 'No of Bookings',
                tickFormat: function(d){
                    return d3.format('d')(d);
                }
            },
            callback: function(chart){
                console.log("!!! lineChart callback !!!");
            },
            defined:function(d) { return !isNaN(d[1]); }
        },
        title: {
            enable: false,
            text: 'Title for Line Chart'
        },
        subtitle: {
            enable: false,
            text: '',
            css: {
                'text-align': 'center',
                'margin': '10px 13px 0px 7px'
            }
        },
        caption: {
            enable: false,
            html: '',
            css: {
                'text-align': 'justify',
                'margin': '10px 13px 0px 7px'
            }
        }
    };

}

Answer 1

如果您的数据长度为 1，则从 $scope.options.chart.forceY 中删除 forceY，如下所示：

删除 $scope.options.chart['forceY']

图表将由 d3 正确呈现。问题是，当您在 d3 中使用 'forceY' 选项时，如果单点不是 rendered.You，则必须通过 hovering.So 删除 'forceY' 来找到图中的点，当数据为 1 ，图形将使用 d3 提供的默认渲染选项正确渲染，单点可见，y 轴将显示 1，空格表示 0 和 2（一些大于 1 的值）。

nvd3 折线图中未显示单点

Single point not shown in nvd3 line chart

d3.js

nvd3.js

linechart

angular-nvd3