Question

我正在尝试捕获nvd3堆积区域图表上的点击事件。我能够捕获工具提示show tooltip hide事件。我想捕获点击事件并获取点击的点信息。请帮忙。 PLUNKER_LINK

我的图表选项是：

chart: {
                type: 'stackedAreaChart',
                height: 450,
                x: function (d) { return d[0]; },
                y: function (d) { return d[1]; },
                showValues: true,
                valueFormat: function (d) { return d3.format(',.4f')(d); },
                dispatch: {
                    tooltipShow: function (e) { console.log('! tooltip SHOW !') },
                    tooltipHide: function (e) { console.log('! tooltip HIDE !') },
                    beforeUpdate: function (e) { console.log('! before UPDATE !') },
                    elementClick: function (e) { alert('clicked');}

                }
            }
        };

Answer 1

您需要将dispatch块包装在stacked块中：

stacked: {
    dispatch: {
        tooltipShow: function (e) { console.log('! tooltip SHOW !') },
        tooltipHide: function (e) { console.log('! tooltip HIDE !') },
        beforeUpdate: function (e) { console.log('! before UPDATE !') },
        elementClick: function (e) { alert('clicked');}
    }
}

但是通过这样做，您仍然无法接收elementClick，因为堆叠的图表层只是无法发送它。相反，您可以收到areaClick事件，但只有当您点击内部堆积区域时才会触发该事件。

因此，我建议您拦截来自＆＃34;互动＆＃34;的调度事件。层。就这样做：

chart: {
    type: 'stackedAreaChart',
    ...
    interactiveLayer: {
        dispatch: {
            elementMousemove: function(e) {
                console.log(e.mouseX + " " + e.mouseY + " " + e.pointXValue);
            },
            elementClick: function(e) {
                console.log(e.mouseX + " " + e.mouseY + " " + e.pointXValue);
            }
        }
    }
}

nvd3捕获堆积区域图表上的点击事件

1 个答案: