drawHistogramRects()

in src/distribution/plot.tsx [218:265]


    drawHistogramRects(hist: BinsDrawData, densityScale: d3.ScaleLinear<number, number>, animate: boolean, binsOrdering: number[]) {
        const total = d3.sum(hist.bins, (d) => d.length);
        const densityScaleFromLength = (d) => densityScale(total ? d.length / total : 0);
        const dataScale = d3.scaleLinear().range(this.dataScale.range());
        var u = d3.select(hist.g).selectAll<SVGRectElement, any>("rect")
            .data(hist.bins);

        var ut = u
            .enter()
            .append("rect") // Add a new rect for each new elements
            .merge(u) // get the already existing elements as well
            .attr("data-value-sample", function(d, i) { return d.length ? d[0][this.props.axis] : "empty"}.bind(this))
            .on('mouseover', function (d, i) {
                d3.select(this).transition()
                     .duration(150)
                     .attr('opacity', '.5');
            })
            .on('mouseout', function (d, i) {
                    d3.select(this).transition()
                        .duration(150)
                        .attr('opacity', '1');
            })
            .transition() // and apply changes to all of them
            .duration(animate ? this.props.animateMs : 0);

        if (this.isVertical()) {
            ut
                .attr("x", 1)
                .attr("transform", function(d) { return "translate(" + dataScale(d.x0) + "," + densityScaleFromLength(d) + ")"; })
                .attr("width", function(d) { return dataScale(d.x1) - dataScale(d.x0) -1 ; })
                .attr("height", function(d) {
                    return this.figureHeight() - densityScaleFromLength(d);
                }.bind(this));
        } else {
            ut
                //.attr("y", 1)
                .attr("transform", function(d, i) { return "translate(0," + dataScale(hist.bins[binsOrdering[i]].x1) + ")"; })
                .attr("width", function(d) { return densityScaleFromLength(d); })
                .attr("height", function(d, i) {
                    const delta = Math.abs(dataScale(hist.bins[binsOrdering[i]].x1) - dataScale(hist.bins[binsOrdering[i]].x0));
                    return delta > 2 ? delta - 1 : delta;
                }.bind(this));
        }

        u
            .exit()
            .remove();
    }