Old school D3 from simpler times

All examples By author By category About

tomschulze

Full window Github gist

dc.js dynamically add class to dc.SelectMenu; IE11 issue

When dynamically adding custom css classes to a dc.selectMenu IE11 kicks them out when filters are applied. For now I push them in again using a renderlet. This causes "glitches"/moves content around due to added padding or widths/heights.

~~Is this a bug? Does anyone know a cleaner workaruound not causing these glitches to appear?~~

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <link rel="stylesheet" type="text/css" href="https://unpkg.com/dc@3/dc.css" />
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-rc.10/css/uikit.min.css" />

<script src="https://unpkg.com/d3@5/dist/d3.js"></script>
  <script src="https://unpkg.com/crossfilter2@1.4/crossfilter.js"></script>
  <script src="https://unpkg.com/dc@3/dc.js"></script>
</head>

<body>
  <div id="select"></div>
  <div id="test"></div>

<script>
  var chart = dc.barChart("#test");
  var experiments = [{"Expt":1,"Run":1,"Speed":850},{"Expt":1,"Run":2,"Speed":740},{"Expt":1,"Run":3,"Speed":900},{"Expt":1,"Run":4,"Speed":1070},{"Expt":1,"Run":5,"Speed":930},{"Expt":1,"Run":6,"Speed":850},{"Expt":1,"Run":7,"Speed":950},{"Expt":1,"Run":8,"Speed":980},{"Expt":1,"Run":9,"Speed":980},{"Expt":1,"Run":10,"Speed":880},{"Expt":1,"Run":11,"Speed":1000},{"Expt":1,"Run":12,"Speed":980},{"Expt":1,"Run":13,"Speed":930},{"Expt":1,"Run":14,"Speed":650},{"Expt":1,"Run":15,"Speed":760},{"Expt":1,"Run":16,"Speed":810},{"Expt":1,"Run":17,"Speed":1000},{"Expt":1,"Run":18,"Speed":1000},{"Expt":1,"Run":19,"Speed":960},{"Expt":1,"Run":20,"Speed":960},{"Expt":2,"Run":1,"Speed":960},{"Expt":2,"Run":2,"Speed":940},{"Expt":2,"Run":3,"Speed":960},{"Expt":2,"Run":4,"Speed":940},{"Expt":2,"Run":5,"Speed":880},{"Expt":2,"Run":6,"Speed":800},{"Expt":2,"Run":7,"Speed":850},{"Expt":2,"Run":8,"Speed":880},{"Expt":2,"Run":9,"Speed":900},{"Expt":2,"Run":10,"Speed":840},{"Expt":2,"Run":11,"Speed":830},{"Expt":2,"Run":12,"Speed":790},{"Expt":2,"Run":13,"Speed":810},{"Expt":2,"Run":14,"Speed":880},{"Expt":2,"Run":15,"Speed":880},{"Expt":2,"Run":16,"Speed":830},{"Expt":2,"Run":17,"Speed":800},{"Expt":2,"Run":18,"Speed":790},{"Expt":2,"Run":19,"Speed":760},{"Expt":2,"Run":20,"Speed":800},{"Expt":3,"Run":1,"Speed":880},{"Expt":3,"Run":2,"Speed":880},{"Expt":3,"Run":3,"Speed":880},{"Expt":3,"Run":4,"Speed":860},{"Expt":3,"Run":5,"Speed":720},{"Expt":3,"Run":6,"Speed":720},{"Expt":3,"Run":7,"Speed":620},{"Expt":3,"Run":8,"Speed":860},{"Expt":3,"Run":9,"Speed":970},{"Expt":3,"Run":10,"Speed":950},{"Expt":3,"Run":11,"Speed":880},{"Expt":3,"Run":12,"Speed":910},{"Expt":3,"Run":13,"Speed":850},{"Expt":3,"Run":14,"Speed":870},{"Expt":3,"Run":15,"Speed":840},{"Expt":3,"Run":16,"Speed":840},{"Expt":3,"Run":17,"Speed":850},{"Expt":3,"Run":18,"Speed":840},{"Expt":3,"Run":19,"Speed":840},{"Expt":3,"Run":20,"Speed":840},{"Expt":4,"Run":1,"Speed":890},{"Expt":4,"Run":2,"Speed":810},{"Expt":4,"Run":3,"Speed":810},{"Expt":4,"Run":4,"Speed":820},{"Expt":4,"Run":5,"Speed":800},{"Expt":4,"Run":6,"Speed":770},{"Expt":4,"Run":7,"Speed":760},{"Expt":4,"Run":8,"Speed":740},{"Expt":4,"Run":9,"Speed":750},{"Expt":4,"Run":10,"Speed":760},{"Expt":4,"Run":11,"Speed":910},{"Expt":4,"Run":12,"Speed":920},{"Expt":4,"Run":13,"Speed":890},{"Expt":4,"Run":14,"Speed":860},{"Expt":4,"Run":15,"Speed":880},{"Expt":4,"Run":16,"Speed":720},{"Expt":4,"Run":17,"Speed":840},{"Expt":4,"Run":18,"Speed":850},{"Expt":4,"Run":19,"Speed":850},{"Expt":4,"Run":20,"Speed":780},{"Expt":5,"Run":1,"Speed":890},{"Expt":5,"Run":2,"Speed":840},{"Expt":5,"Run":3,"Speed":780},{"Expt":5,"Run":4,"Speed":810},{"Expt":5,"Run":5,"Speed":760},{"Expt":5,"Run":6,"Speed":810},{"Expt":5,"Run":7,"Speed":790},{"Expt":5,"Run":8,"Speed":810},{"Expt":5,"Run":9,"Speed":820},{"Expt":5,"Run":10,"Speed":850},{"Expt":5,"Run":11,"Speed":870},{"Expt":5,"Run":12,"Speed":870},{"Expt":5,"Run":13,"Speed":810},{"Expt":5,"Run":14,"Speed":740},{"Expt":5,"Run":15,"Speed":810},{"Expt":5,"Run":16,"Speed":940},{"Expt":5,"Run":17,"Speed":950},{"Expt":5,"Run":18,"Speed":800},{"Expt":5,"Run":19,"Speed":810},{"Expt":5,"Run":20,"Speed":870}];
    
  var ndx                 = crossfilter(experiments),
      runDimension        = ndx.dimension(function(d) {return +d.Run;}),
      speedSumGroup       = runDimension.group().reduceSum(function(d) {return d.Speed * d.Run / 1000;}),
      exptDim             = ndx.dimension(function(d) {return d.Expt;}),
      exptGroup           = exptDim.group();
    
  var selectMenu = dc.selectMenu('#select')
      .dimension(exptDim)
      .group(exptGroup)
      .title(function (d){
        return "experiment " + d.key;
      })           
      .filter("1");
  
  chart
    .width(768)
    .height(480)
    .x(d3.scaleLinear().domain([6,20]))
    .brushOn(false)
    .dimension(runDimension)
    .group(speedSumGroup);
  
  dc.renderAll();
    
  // works fine in edge, firefox,chrome; not in IE11  
  selectMenu.select('select').classed('uk-select', true);
  
  chart.on('renderlet', function(chart){
    // IE11 workaround: causes glitches due to added padding;
		selectMenu.select('select').classed('uk-select', true);
    
  });
  </script>
</body>

https://unpkg.com/d3@5/dist/d3.js

https://unpkg.com/crossfilter2@1.4/crossfilter.js

https://unpkg.com/dc@3/dc.js