如何使用 dc.redrawAll() 函数 onclick？

Question

我希望能够以这样一种方式使用 dc.js select 菜单 (dc.selectMenu)，即当我单击某个元素时它会获取该元素的值并且这成为 select 的值，一旦 selected 它应该刷新数据，如果您首先 selected 它通常会刷新数据。

我遇到的问题是我可以设置值，但是 dc.redrawAll() 似乎对我没有任何作用所以我想我一定是过滤错误了，但我找不到太多信息除了简单地使用过滤器方法（不是 onclick）之外，在线了解如何做到这一点。

我已尝试将目的地设置为似乎有效的任何数据目的地，当我检查 console.log 的值时 select 的值确实更新了select 菜单，然后我使用 dc.redrawAll() 函数期望它会根据 select 选项进行过滤，但它什么都不做（甚至在控制台中也没有错误）

到目前为止我的函数看起来像：

function select_destination(ndx) {
    var destination_dim = ndx.dimension(dc.pluck('destination'));
    var destination_group = destination_dim.group();
    var destination = null;

    document.addEventListener('click', function(e) {
        if (!e.target.matches('.open-popup-link')) return;

        e.preventDefault();

        var destination = e.target.getAttribute('data-destination').toString();
        document.getElementById('select-destination').value = destination;

        dc.redrawAll();
    });

    dc.selectMenu('#select-destination')
        .dimension(destination_dim)
        .group(destination_group)
        .filter(destination);
}

我希望图表根据 select 选项进行更新，但没有任何反应，我也没有收到任何错误消息。

我怀疑我错误地使用了 dc.redrawAll() 就像我去控制台输入 dc.redrawAll();我得到了 undefined 但我现在真的很茫然，文档在这一点上并没有真正帮助我，所以我不知道还能做什么。

Answer 1

它们是您的代码中的一些我不太理解的部分，例如为什么您有 filter(destination /*=null */)

无论如何，所以你想过滤 select 菜单？您可以直接使用值调用 replaceFilter 函数，如源代码中所做的那样：

    menu.replaceFilter(destination);
    dc.events.trigger(function () {
        menu.redrawGroup();
    });

查看源代码以获取完整示例 https://dc-js.github.io/dc.js/docs/html/select-menu.js.html#sunlight-1-line-129

至于为什么它不起作用，我在将 d3 与纯 dom js 混合时得到了一些令人惊讶的结果。尝试在 d3 中重写偶数处理程序，例如

d3.select('#select-destination').property('value', destination);

可能直接更改 dom 上的值不会触发更改事件。

我对 d3 的经验是，更改底层数据（直接调用过滤函数或任何你想做的事情）并让 dc 重绘所需的而不是直接操作 dom 效果更好

如何使用 dc.redrawAll() 函数 onclick？

How do you use the dc.redrawAll() function onclick?

d3.js

dc.js