1

我正在尝试在 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');}

                }
            }
        };
4

1 回答 1

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

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

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);
            }
        }
    }
}
于 2015-11-30T16:24:10.583 回答