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

所以 select 或者是 rect.bar。此外，便捷方法 chart.selectAll() 比直接使用 d3 更好，因为它只会 select 在当前图表中。

最后，为了避免踩踏 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
    });
});

DC.JS 单击时选择栏

DC.JS Selecting a Bar on Click

javascript

d3.js

dc.js