0

I'm trying to build a slider element (much like input range element in HTML5), using d3.js brushes.

Following up from Disable d3 brush resize post, i tried a few things however none of them are able to disable the resize behavior.

Here's my progress so far:

 var width = 640,
            height = 480,
            margin = {
                right: 30,
                left: 30
            }

        var svg = d3.select('body')
            .append('svg')
            .attr('width', width)
            .attr('height', height)

        var xScale = d3.scaleLinear()
            .domain([0, 180])
            .range([0, width])
            .clamp(true) //May not be required in version 5

        svg.append('g')
            .attr('class', 'x axis')
            .attr('transform', 'translate(50,100)')
            .call(d3.axisBottom()
                .scale(xScale)
                .tickSize(0)
                .tickFormat("")
            )

        var brush = d3.brushX()
            .extent([
                [0, 0],
                [width, 20]
            ])
            .on('brush', brushed)

        var brushg = svg.append('g')
            .attr('class', 'brush')
            .call(brush)
            .attr('transform', 'translate(50,100)')

        brushg.selectAll(".resize").remove();

        function brushed() {
        }


        brush.move(brushg, [0, 20].map(xScale));
.brush .extent {
            fill-opacity: .125;
            shape-rendering: crispEdges;
        }
        
        g.brush>.resize {
            display: none;
        }
        
        .handle {
            pointer-events: none;
        }
<script src="https://d3js.org/d3.v5.min.js"></script>

Also, does the below snippet (mentioned in many posts and examples) no longer work?

brush.selectAll(".resize").remove();

Is this a version specific issue? How can I disable the brush resize without over-complicating the source code in version 5 of d3?

D_S_X
  • 1,351
  • 5
  • 17
  • 35
  • 1
    I'm not following your question: the snippet **is** working. – Gerardo Furtado May 02 '18 at 01:04
  • sorry if the question was not clear .... i just want this initial drawn brush to drag from left to right ... currently it's not resizable from its initial position (because the handles are disabled) however if i drag crosshair cursor somewhere ahead of brush it draws a new brush which is resizing ... i want to achieve something like http://jsbin.com/hahigafodi/edit?html,css,js,output but in d3 v5 – D_S_X May 02 '18 at 07:44

0 Answers0