<div id='info'>
<h3><code>barSize();</code></h3>
<p>Change the size of the bar elements. Positive value set the absolute value in pixels. Negative values specify the scale relative to space between ticks. i.e. -0.5 will set the bar size to 50% of the width between the ticks.</p>
<p>Change the bars size:</p>  
<p><code>.barSize(<button class="rs-btn--small rs-btn--selected" onclick='size_10()'>10</button> 
    <button class="rs-btn--small" onclick='size_n05()'>-0.5</button>); 
  </code></p>
<div id='chart'></div>
</div>

#info{
  margin: 1em;
}
//Redsift
//barSize();
//Set the size the bar elements

//barSize set to 10
let chart = d3_rs_bars.html()
                      .barSize(10); //positive bar size element
                                         
d3.select('#chart').datum([1,2,3,10,20]).call(chart);

//on toggle set barSize to 10
function size_10(){
let chart = d3_rs_bars.html()
                      .barSize(10); //positive bar size element
                                         
d3.select('#chart').datum([1,2,3,10,20]).call(chart);
}

//on toggle set barSize to -0.5
function size_n05(){
let chart = d3_rs_bars.html()
                      .barSize(-0.5); //negetive bar size element
                                         
d3.select('#chart').datum([1,2,3,10,20]).call(chart);
}

// Generic function to toggle selected state of a button
d3.selectAll('button')
  .on('click', function() {
    let selected = this;
    d3.selectAll('button')
      .classed('rs-btn--selected', function() {
        return (selected === this);
      });
  });
View Compiled

External CSS

  1. https://static.redsift.io/reusable/ui-rs-core/latest/css/ui-rs-core.min.css

External JavaScript

  1. https://d3js.org/d3.v4.min.js
  2. https://static.redsift.io/reusable/d3-rs-bars/latest/d3-rs-bars.umd-es2015.min.js