Customization of bush handler

Just as all of you know that the magic come from paht's d attribute. Using function triangleData to generate a string which contain the d's value, such as:

m 0,0 -10.717967697244909,40 21.435935394489817,0 z

that is: pt1=(0,0), pt2=(-10.717967697244909,40) and pt3=(21.435935394489817,0)

then an erect triangle-path is generated.

Lowercase commond indicates that sibling points' coordinates of d-value is relative coordinate. So point pt2 is based on pt1, and pt3 is based on pt2, then on and on.

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v3.min.js"></script>
  <style>
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
    svg{border: 1px solid #ccc; background-color: #fee;}

circle{
        fill: lightblue;
        fill-opacity: 0.3;
        transition:  all 0.2s;
    }
    circle.selected{
        stroke: red;
        stroke-width: 1;
        fill-opacity: 1;
    }
    .resize path{
        fill: #666;
        fill-opacity: 0.5;
        stroke: black;
        stroke-width: 0;
    }
    .brush .extent{
        fill: #f55;
        fill-opacity: 0.3;
    }
    .xAxis path, .xAxis line{
        fill: none;
        stroke: black;
        stroke-width: 1;
    }
  </style>
</head>

<body>
  <div id="container"></div>
  <script>
    var data = d3.range(800).map(Math.random);

var margin = {top: 100, right: 50, bottom: 80, left: 50},
        svgWidth = 960,
        svgHeight = 300,
        width = svgWidth - margin.left - margin.right,
        height = svgHeight - margin.top - margin.bottom;

var x = d3.scale.linear().range([0, width]);

var y = d3.random.normal(height / 2, height / 8);

var brush = d3.svg.brush()
        .x(x)
        .extent([0.3,0.8])
        .on('brush', onBrush);

var svg = d3.select('#container')
        .append('svg')
        .attr({width: svgWidth, height: svgHeight})
        .append('g')
        .attr('transform',
              'translate(' + [margin.left, margin.right] + ')');

svg
        .append('g')
        .attr('class', 'circle')
        .selectAll('circle')
        .data(data)
        .enter()
        .append('circle')
        .attr({
            r: 8,
            transform: function(d){
                return 'translate(' + [x(d), y()] + ')';
            }
        });

svg
        .append('g')
        .attr('class', 'xAxis')
        .attr('transform', 'translate(0,' + height + ')')
        .call(d3.svg.axis().scale(x).orient('bottom'));

var brushG = svg.append('g')
        .attr('class', 'brush')
        .call(brush)
        .call(brush.event);

brushG
        .selectAll('rect')
        .attr('height', height);

brushG
        .selectAll('.resize')
        .append('path')
        .attr('d', triangleData(20, 30))
        .attr('transform', 'translate(0,' + (height) + ')');

function onBrush(){
        var ext = brush.extent();
        d3.selectAll('.circle circle').classed('selected', function(d){
            return d >= ext[0] && d <= ext[1];
        })
    }

// such as: 'm 0,0 -10.717967697244909,40 21.435935394489817,0 z'
    function triangleData(angular, h){
        var rad = angular * Math.PI / 180;
        return 'm 0,0 ' +
        [-h * Math.tan(rad), h] + ' ' +
        [2 * h * Math.tan(rad), 0] + ' z';
    };
  </script>
</body>

https://d3js.org/d3.v3.min.js