dc.js 带复选框的多选菜单答案

【问题标题】：dc.js multiple select menu with checkboxesdc.js 带复选框的多选菜单
【发布时间】：2017-06-02 18:56:54
【问题描述】：

我有一个由 5 列组成的数据集 -> 国家、ID、价值和部门。我能够使用值和国家/地区在 dc.js 中创建一个行图，其中国家是我的维度。

var rowChart = dc.rowChart('#rowChart');
d3.csv('data.csv', function(data){
 data.forEach(function(d){
  d.country = d.country;
  d.id = d.id;
  d.value = +d.value;
  d.sector = d.sector;
 });
 var height = 300;
 var width = 300;

 var ndx = crossfilter(data)  
 var countryDim = data.dimension(function (d) { 
  return d.country; 
 });
 var countryGroup = countryDim.group().reduceSum(function (d) {
  return d.value
 })

 rowChart
  .width(300)
  .height(900)
  .margins({top: 10, right: 10, bottom: -1, left: 30})
  .dimension(countryDim)
  .group(countryGroup)
  .colors('#86BC25')
  .ordering(function (d) { return -d.value; })
  .elasticX(true)
  .xAxis();

 rowChart
  .title(function (d) { return d.value;})
  .renderTitleLabel(true)
  .titleLabelOffsetX(10);

 dc.renderAll();
});

这是我在 csv 中的数据

  country,id,value,sector
  USA,0982,10,high
  AUS,0983,9,high
  IND,0982,10,high
  CHN,0982,8,high
  CUB,0986,5,middle
  FIN,0987,low

我尝试创建一个 jsfiddle，但似乎不起作用，抱歉我的第一次 http://jsfiddle.net/i8rice/2r76bjt7/4/

我希望能够创建两个带有复选框的下拉菜单。一个按国家过滤行图，另一个按部门过滤。因此，如果我首先在下拉菜单中按“高”过滤该行业，则行图将被过滤，而另一个下拉菜单应该只显示 5 个“高”国家。

我知道使用 dc.selectMenu 可以实现这一点，但我希望使用下拉复选框样式。我想知道 dc.js 是否可以做到这一点？

抱歉，我对提问以及 d3.js、dc.js 和 crossfilter 非常陌生。

【问题讨论】：

请试试这个stackoverflow.com/questions/38591613/…
也可以使用jsfiddle.net/gordonwoodhull/uterbmhd/9
我猜你的意思是下拉菜单中的复选框。看起来您可能可以将 selectMenu 与 .multiple(true) 选项一起使用，然后使用像 multiple-select 这样的 jQuery 插件应用您想要的样式。
嗨@Gordon 我尝试使用 jQuery 进行样式设置，但它似乎不起作用。我设法让我的 jsfiddle 工作 jsfiddle.net/i8rice/2r76bjt7/16 。如果我在
中定义我的 dc.selectMenu 而不是使用
我试过 selectField.multiple('multiple') 还是不行，下拉列表中[全选]旁边没有显示任何值。

【解决方案1】：

感谢 Gordon，下拉菜单中的复选框正常工作。但是在与其他几个人讨论后，他们建议该复选框一旦打勾，就不会调用事件处理程序，所以写了这个，这与 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"})
 });

一切正常，很好，在本地进行了测试。我不知道任何其他方式，因为我对此仍然很陌生。

【讨论】：

太棒了！我想 jQuery 的东西一定是从一个控件到另一个未连接的控件的单向转换。无论如何，很高兴你能成功。