SO 24193593

http://stackoverflow.com/questions/24193593/

HTML

<body>

<select id = "opts">
<option value="ds1">data1</option>
<option value="ds2" selected="selected">data2</option> 
<option value="ds3">data3</option>
<option value="ds4">data4</option>
  <!-- and so on... -->   
  </select>   
    
</body>

JavaScript

var w = 100,
    h = 100
;

var color = d3.scale.ordinal()
            .range(['#1459D9', '#daa520']);


var ds1 = [{x:0,y:12},{x:0,y:45}];
var ds2 = [{x:0,y:72},{x:0,y:28}];
var ds3 = [{x:0,y:82},{x:0,y:18}];
var ds4 = [{x:0,y:92},{x:0,y:08}];


// config, add svg
var canvas = d3.select('body')
    .append('svg')
    .attr('width',100)
    .attr('height',100) 
    .append('g');


// function that wraps around the d3 pattern (bind, add, update, remove)
function updateLegend(newData) {

    // bind data
    var appending = canvas.selectAll('rect')
       .data(newData);

    // add new elements
    appending.enter().append('rect');

    // update existing elements
    appending.transition()
        .duration(0)
        .style("fill", function(d,i){return color(i);})
        .attr("x",10)
        .attr("y",10)
        .attr("width",function (d) {return d.y; })//d.y;})
        .attr("height",19);

    // remove old elements
    appending.exit().remove();

}

// generate initial legend
updateLegend(ds2);

// handle on click event
d3.select('#opts')
  .on('change', function() {
    var newData = eval(d3.select(this).property('value'));
    updateLegend(newData);
});