javascript - DC.JS 在点击时选择一个栏

Question

我试图在用户单击特定条形图时调用条形图上的函数。我意识到我需要使用 renderlet 将监听器添加到渲染函数，然后从那里创建每个栏的分组，将添加一个点击事件。

假设使用任何通用条形图，我将其称为:

barChart.on('renderlet', function(chart, filter)
{
    // TODO Select the bars here and add an on click function
});

唯一的问题是我无法找到如何使用该图表对象在柱上执行 d3.select 调用。当我将它转出时，我没有在对象中看到任何类似条形的东西。

Answer 1

这种东西，最简单的办法就是追根溯源。在这种情况下，

    var enter = bars.enter()
        .append('rect')
        .attr('class', 'bar')

https://github.com/dc-js/dc.js/blob/develop/src/bar-chart.js#L90-L92

所以选择器是rect.bar。此外，便捷方法 chart.selectAll() 比直接使用 d3 更好，因为它只会在当前图表内进行选择。

最后，为了避免踩踏 dc.js 内部使用的事件，您可能需要为事件处理程序命名空间。

加起来，

barChart.on('renderlet.barclicker', function(chart, filter)
{
    chart.selectAll('rect.bar').on('click.custom', function(d) {
        // use the data in d to take the right action
    });
});