滑动条为什么没有出现
完整代码如下:
<div id="chart_3" class="echart t_btn7" style="width:100%;height: 200px;"></div>
<div class="slider_container">
<div id="sliderone"></div>
<div id="value-simple"></div>
</div>
<script>
var margin = { top: 20, right: 20, bottom: 30, left: 100 };
var width = 1100 - margin.left - margin.right;
var height = 600 - margin.top - margin.bottom;
var content = d3.select('#chart_3')
.append('svg')
.attr('id','box')
.attr('width', width + margin.left + margin.right)
.attr('height', height + margin.top + margin.bottom)
.append('g')
.attr('id', 'content')
.style('transform', `translate(${margin.left}px,${margin.top}px)`)
const time = 6
var slider_one = d3.sliderBottom()
.min(new Date(2023, 11, 20, time))
.max(new Date(2023, 11, 20, time + 1))
.width(800)
.ticks(10)
.default(0.5)
.tickFormat(d3.timeFormat('%M:%S'))
.fill('blue')
.on('onchange', function (val) {
d3.select('#value-simple').text(val);
console.log(val)
})
var gSimple = d3.select('#sliderone')
.append('g')
.attr('transform', 'translate(30,120)')
.call(slider_one);
d3.select('#value-simple').text((slider_one.value()));