Hight with container rect

by k_sav

JavaScript

//Width and height
    var w = 600;
    var h = 250;

    var dataset = [5, 10, 13, 19, 21, 25, 22, 18, 15, 13,
        11, 12, 15, 20, 18, 17, 16, 18, 23, 25];

    var xScale = d3.scaleBand()
        .domain(d3.range(dataset.length))
        .rangeRound([0, w])
        .paddingInner(0.05);

    var yScale = d3.scaleLinear()
        .domain([0, d3.max(dataset)])
        .range([0, h]);

    //Create SVG element
    var svg = d3.select("body")
        .append("svg")
        .attr("width", w)
        .attr("height", h);

		//Create groups to hold the bars and text for each data point
    var groups = svg.selectAll(".groups")
        .data(dataset)
        .enter()
        .append("g")
        .attr("class", "gbar");

    //Create bars
    groups.append("rect")
        .attr("class", "actualRect")
        .attr("x", function (d, i) {
            return xScale(i);
        })
        .attr("y", function (d) {
            return h - yScale(d);
        })
        .attr("width", xScale.bandwidth())
        .attr("height", function (d) {
            return yScale(d);
        })
        .attr("fill", function (d) {
            return "rgb(0, 0, " + Math.round(d * 10) + ")";
        });

    //Create labels
    groups.append("text")
        .text(function (d) {
            return d;
        })
        /*.style("pointer-events", "none")*/
        .attr("text-anchor", "middle")
        .attr("x", function (d, i) {
            return xScale(i) + xScale.bandwidth() / 2;
        })
        .attr("y", function (d) {
            return h - yScale(d) + 14;
        })
        .attr("font-family", "sans-serif")
        .attr("font-size", "11px")
        .attr("fill", "white");

		// Create container rect
		// The goal is to be able to hover *above* a bar, but only highlight the visible blue bar to orange.
    // I don't understand how to select (this).('actualRect'), instead of (this).("containerRect")
    groups.append("rect")
        .attr("class", "containerRect")
       ...