d3.js - dc.js 带复选框的多选菜单

Question

我有一个包含 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 很陌生。

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

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