d3.js - how to adjust the height of the brush selection - d3.js

Question

I want to fill the height of the brush selection by default to the height of the rectangles on which it is drawn.
Here is my code:
var margin = {top: 10, right: 50, bottom: 20, left: 50},
width = 800 - margin.left - margin.right,
height = 120 - margin.top - margin.bottom;
var svgheight=40,svggraphheight=400;
var svg,svgcheckins,svgbuilds,svgoss,svgappsec;
var x,j = 0;
var x_axis = 1;
var y_axis = 45;
var xvar=0;
var yvar=40;
var rectangle,RectangleAttrb,rect,rectdata,selected,begindata,enddata;
function loaddata()
{
svg = d3.select("#timer").append("svg").attr("id","svgtimer")
.attr("width", 550)
.attr("height", svgheight)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
svgcheckins= d3.select("#legend").append("svg").attr("id","svgcheckins")
.attr("width", 250)
.attr("height", 200)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
d3.json("TimerData.json", function(data)
{
CreateLegend('#timer',svg,"rectangle",data,'Mar 1','Oct 4');
createbrush();
});
}
function createbrush()
{
var brush = d3.svg.brush()
.x(d3.scale.identity().domain([0, width]))
.y(d3.scale.identity().domain([0, height+30]))
//.on("brushstart", brushstart)
.on("brushend", brushed);
svg.append("g").call(brush);
function brushed()
{
//var e = brush.extent();
var e = d3.event.target.extent();
selected = svg.selectAll("rect").filter(function(d)
{
return d.x_axis <= e[1][0] && d.x_axis + d.width >= e[0][0] && d.y_axis <= e[1][1] && d.y_axis + d.height >= e[0][1];
})
//console.log("e[1][0] " + e[1][0] + " e[0][0] " + e[0][0] + "object " +e);
//createtinderboxes(selected);
}
function brushstart()
{
var e = brush.extent(0,5);
}
}
function CreateLegend(div,svg,svgid,data,header,trail)
{
var traillength=0;
var svgelem;
jsondata = data;
console.log(data);
rectangle= svg.selectAll("rect").data(data).enter().append("rect");
var RectangleAttrb = rectangle
.attr("id", function (d,i) { return svgid + "id" + i ; })
.attr("x", function (d) { return d.x_axis; })
.attr("y", function (d) { return d.y_axis; })
.attr("width",function(d) { return d.width; } )
.attr("height",function(d) { return d.height; })
.style("stroke", function (d) { return d.border;})
.style("fill", function(d) { return d.color; });
var textparam = svg.selectAll("text").data(data).enter().append("text");
var yearheader = d3.select("#header");
if(yearheader.empty())
{
var textheader = svg.append("text").attr("dx",20).attr("dy",5).text(header).attr("id",header).attr("style","margin-bottom:21px;border-bottom: solid 2px #ffd97f; font-size:12px;")
}
if (trail.length == 0)
{
d3.select(header).attr("style","font-size:15.1px;text-decoration:underline");
}
var text = textparam .attr("x", function (d) { traillength = d.x_axis + d.width +10; return d.x_axis + d.width +10; })
.attr("y", function (d) { return d.y_axis + d.height-5; })
.attr("width",30 )
.attr("height",20)
.attr("style", "text-decoration:none")
.text(function(d) { return d.text; });
var yearheader = d3.select("#trail");
if (trail.length > 0 && yearheader.empty() )
{
svg.append("text").attr("id","trail").attr("dx",traillength-10).attr("dy",5).text(trail).attr("style","margin-bottom:21px;border-bottom: solid 2px #ffd97f; font-size:12px;" )
}
}
the data is read from json file:
[
{ "x_axis":40, "y_axis": 10,"width":20,"height":15,"color" : "#ffffff","border":"#000000"},
{ "x_axis":60, "y_axis": 10,"width":20,"height":15,"color" : "#ffffff","border":"#000000"},
{ "x_axis":80, "y_axis":10,"width":20,"height":15,"color" : "#ffffff","border":"#000000"}
]

Answer 1

You can set the extent of the brush in code using brush.extent(), so in your case something like
brush.extent([[40, 80], [10, 25]]);