nvd3 在堆积面积图上捕获点击事件

Question

我正在尝试在 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 块包装在 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 事件，但只有当您单击内部堆叠区域时才会触发。

因此我建议您拦截来自 "interactive" 层的调度事件。就像这样：

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 在堆积面积图上捕获点击事件

nvd3 capture click event on stacked area chart

javascript

angularjs

nvd3.js

angularjs-nvd3-directives