JSFiddle - React, Tailwind, and code Playground

by amfy10

HTML

<pre...

CSS

pre#data {display:none;}
svg {
  font: 10px sans-serif;
}

.line {
  stroke: steelblue;
  fill:none;
  clip-path: url(#clip);
}

.axis path,
.axis line {
  fill: none;
  stroke: #000;
  shape-rendering: crispEdges;
}

.brush .extent {
  stroke: #fff;
  fill-opacity: .125;
  shape-rendering: crispEdges;
}

JavaScript

/*
    * Superimpose
    * Peak pick
*/
scaleBrush = function(){
    var data, width, height, brush_style="full", xScale, yScale, brushCallbacks=[], brushElement;
    
    brush = function(context){
        function brushFun() {
            if(brushCallbacks.length > 0){
               for(var i=0;i<brushCallbacks.length; i++)
                   brushCallbacks[i](brushElement);
            }
            context.call(brushElement);
        }

        //xScale = d3.scale.linear().range([0, width]);
        var xAxis = d3.svg.axis().scale(xScale).orient("bottom");
        
        brushElement = d3.svg.brush()
            .x(xScale)
            .on("brushend", brushFun);        
        
        switch(brush_style){
            case "none": return;
            case "slim":{
                context.append("g")
                    .attr("class", "x axis")
                    .attr("transform", "translate(0," + height + ")")
                    .call(xAxis)
                    .selectAll(".domain")
                        .style("stroke", "#ddd")
                        .style("stroke-width", "8px")
                        .style("stroke-linecap", "round");
                        
                context.append("g")
                    .attr("class", "x brush")
                    .call(brush)
                    .selectAll("rect")
                        .attr("y", -10)
                        .attr("height", height);         
                break;
            }
            case "full":{
                //yScale = d3.scale.linear().range([height, 0]);
                var path_mini = d3.svg.line()
                    .interpolate("cardinal")
                    .x(function(d) { return xScale(d.x); })
                    .y(function(d) { return yScale(d.y); });

                context.append("path")
                    .datum(data)
                    .attr("class", "line")
                    .attr("d", path_mini);
                
               ...