每次使用 dc.renderAll 时，多选按钮都会重复

Question

我使用了由 Jeno 和 Gordon 在 dc.js multiple select menu with checkboxes 开发的想法，特别是带有复选框的 dc.js 多选菜单。

selectField.on('postRender', function() {
 $('#menuselect select').change(function(){
  console.log($(this).val())
  if ($(this).val() && $(this).val() != "") {
   selectField.replaceFilter([$(this).val()]);
  } else {
   selectField.filterAll();
  }
   dc.events.trigger(function () {
   dc.redrawAll();
  });
 }).multipleSelect({ placeholder: "Select Country"})
});

我遇到的问题是，每次我使用 dc.renderAll() （在重置所有按钮和页面大小更改时）时，都会复制相同的多选按钮，克隆到按钮旁边等等，具体取决于有多少次启用renderAll()。 此外，如果对图表应用过滤器，菜单不会更新。

你能想出一个解决办法吗？

谢谢

Answer 1

使用 jQuery 替换显示元素总是有点棘手。看起来这个可能会附加到特定的 select 元素，如果它被替换（在渲染期间），它将继续创建一个新菜单。

处理起来很简单，只需在渲染时删除所有旧菜单，并在重绘时刷新控件：

function re_jmulti(clear) {
  return function() {
    if(clear)
      selectField.selectAll('.ms-parent.dc-select-menu').remove();
    $('#menuselect select')
    .change(function() {
      console.log($(this).val());
      //selectField.replaceFilter($(this).val()); // why?
    })
    .multipleSelect({
      placeholder: "Select Country"
    });
  };
}

selectField.on('postRender', re_jmulti(true));
selectField.on('postRedraw', re_jmulti(false));

但是，我使用的是旧版本的代码，而不是您在上面粘贴的代码，因为我遇到了使用替换过滤器的无限递归并重绘所有逻辑。所以它不是一个完整的解决方案，因为它不会重复并且会更新，但它会在前面问题中的几个问题上倒退。

小提琴：https://jsfiddle.net/gordonwoodhull/Lghj8ztj/32/