d3.json('https://gist.githubusercontent.com/bumbeishvili/a0ab3299b4e4eb1557085317b9136ec1/raw/ba488da953d2fa0e64ff2469a209c520fd408055/dateData.json')
.then(data=>{
new RangeSlider()
.container('.chart-container')
.svgWidth(window.innerWidth-20)
.svgHeight(100)
.data(data)
.accessor(d=>new Date(d))
.onBrush(d=>{
d3.select('.range').html(`range is [` + d.range[0].toLocaleDateString('en')+', '+ d.range[1].toLocaleDateString('en')+`]`)
d3.select('.data').html(`selected data length - `+d.data.length)
})
.render()
})<script src="https://d3js.org/d3.v5.min.js"></script>
<script src="https://unpkg.com/data-driven-range-slider@1.0.1/index.js"></script>
<div class="chart-container" style="margin-top:50px;border-radius:5px;padding-top:30px;padding=left:20px;background-color:#30363E;"> </div>I have a div container that resizes automatically with the window:
The problem I am having is with the SVG attached with d3 (the bar chart). Even though the svgWidth is using window.innerWidth when it is created, this does not change dynamically as the window is resized. Only the container is resized. What in d3 needs to be modified for the SVG to always remain within its container as it does on first loading?
