Question

我希望能够以这样一种方式使用dc.js选择菜单（dc.selectMenu）：当我单击某个元素时，它会获得该元素的值，并成为select的值选择该选项后，应该会像最初选择时一样刷新数据。

我遇到的问题是可以设置该值，但是dc.redrawAll（）似乎对我没有任何作用，因此我认为我必须过滤错误，但是我在网上找不到太多有关如何进行过滤的信息。除了简单地使用过滤器方法（不是onclick）之外，还可以这样做。

我试图将目的地设置为任何似乎可以正常工作的数据目的地，当我使用console.log检查select菜单的值时，select的值的确更新了，然后使用dc .redrawAll（）函数期望它将根据选择选项进行过滤，但不会执行任何操作（甚至不会在控制台中出现错误）

到目前为止，我的功能如下：

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);
}

我希望图形会基于选择选项进行更新，但是什么也不会发生，并且我也不会收到错误消息。

我怀疑我错误地使用了dc.redrawAll（），就好像我进入控制台并键入dc.redrawAll（）;一样。我不确定，但是现在我真的很茫然，文档在这一点上并没有真正帮助我，所以我不知道该怎么办。

Answer 1

它们是我的代码中不太了解的部分，例如，为什么要使用filter（destination / * = null * /）

无论如何，所以您要过滤选择菜单？您可以像在源代码中那样直接用该值调用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？

1 个答案: