Я пытаюсь создать элемент слайдера (очень похожий на элемент диапазона ввода в HTML5), используя кисти d3.js.
Следуя сообщению Отключить изменение размера кисти 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();
Это проблема конкретной версии? Как я могу отключить изменение размера кисти, не усложняя исходный код в версии 5 d3?
извините, если вопрос был неясным .... я просто хочу, чтобы эта начальная нарисованная кисть перетаскивалась слева направо ... в настоящее время ее размер не может быть изменен из исходного положения (потому что ручки отключены), однако, если я перетащу курсор перекрестия куда-то вперед кисти он рисует новую кисть, размер которой изменяется ... я хочу добиться чего-то вроде jsbin.com/hahigafodi/edit?html,css,js,output, но в d3 v5
Я не слежу за вашим вопросом: сниппет является работает.