Question

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

从Disable d3 brush resize发帖后，我尝试了一些事情，但是没有一个能够禁用调整大小行为。

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

 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中的源代码过度复杂的情况下禁用画笔调整大小？

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

0 个答案: