javascript - D3 画笔 - 在 d3 v5 中禁用调整大小行为

Question

我正在尝试使用 d3.js 画笔构建一个滑块元素（很像 HTML5 中的输入范围元素）。

继禁用 d3 画笔调整大小后，我尝试了一些方法，但没有一个能够禁用调整大小行为。

这是我到目前为止的进展：

 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>

此外，下面的代码片段（在许多帖子和示例中提到）不再有效吗？

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

这是特定于版本的问题吗？如何在不使 d3 版本 5 中的源代码过于复杂的情况下禁用画笔调整大小？

标签： javascriptjqueryhtmlcssd3.js