Question

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

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/

我希望能够使用复选框创建两个下拉列表。一个按国家/地区过滤行图，另一个按行业过滤。因此，如果我首先使用“＆＃39; high＆＃39;在下拉菜单中，行图表将被过滤，另一个下拉菜单应该只显示5＆＃39;高＆＃39;国家。

我知道这是可以使用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"})
 });

一切正常，在当地进行了测试。我不知道其他任何方式，因为我还是新手。

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

1 个答案: