javascript - nvd3捕获堆积面积图上的点击事件

Question

我正在 try catch nvd3 堆积面积图上的点击事件。我能够捕获工具提示显示工具提示隐藏事件。我想捕获点击事件并获取点击点信息。请帮忙。 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 block 包装在 stacked block 中:

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 事件，但只有当您单击堆叠区域内部时才会触发该事件。

因此，我建议您从“交互”层拦截调度事件。只需这样做:

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