nvd3 eventclick选项没有得到确切的点

时间:2017-02-01 12:13:34

标签: javascript angularjs d3.js nvd3.js

我正在使用nvd3折线图。在该图表中,我无法获得用户的确切点击点。我正在使用useInteractiveGuideline:true作为工具提示。当我在一天内鼠标悬停时,它显示该日期的所有点。当我点击单点时,它会返回该特定日期的所有数据。

以下是我的演示代码:Plunker Demo

图表选项如下

$scope.options = {
    chart: {
        lines: {
            dispatch: {
                elementClick: function (e, scope) {
                    console.log(e); 
                },
                elementMouseover: function (e) {
                    console.log('mouseover');
                },
                elementMouseout: function (e) {
                    console.log('mouseout');
                },
                renderEnd: function (e) {
                    console.log('renderEnd');
                }
            }
        }, 
        type: 'lineChart',
        height: 450,
        margin: {
            top: 20,
            right: 20,
            bottom: 45,
            left: 45
        },
        x: function (d) {
            return d.x;
        },
        y: function (d) {
            return  d.y
        },
        duration: 500,
        reduceXTicks: false,
        useInteractiveGuideline: true,
        showControls: false,
        xAxis: {
            tickSize: 1,
            axisLabelDistance: 1,
            axisLabel: 'Time (ms)',
            showMaxMin: false,
            tickFormat: function (d) {
                return d3.format(',f')(d);
            }
        },
        yAxis: {
            axisLabel: 'Y Axis',
            axisLabelDistance: -20,
            tickFormat: function (d) {
                return d3.format(',.1f')(d);
            }
        },
        yDomain: [0, 100]
    }
};

在演示中,在第3个日期,我有一个值35.当我点击该数据点时,它将返回该系列中的所有数据。

enter image description here

在上面的控制台中,如何识别单击哪个数据点。请一些人帮助获取点数据。

0 个答案:

没有答案