多选按钮每次重复使用 dc.renderAll

Question

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

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()（在重置所有按钮和页面大小更改时）时，都会复制相同的 multiselect 按钮，克隆到旁边按钮等取决于Enable 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));

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

Fiddle: https://jsfiddle.net/gordonwoodhull/Lghj8ztj/32/

多选按钮每次重复使用 dc.renderAll

The multiselect button repeats every time use dc.renderAll

jquery

dc.js