I am trying to make my bar chart responsive using “resize” function. But for some reason size of my “g” element in svg on browser doesn’t correspond to size defined by it’s “width” and “height” attributes.
This leads me to believe that I did something wrong making “resize” function. If I had used for example “viewBox” on my svg element to get responsivness then again “height” and “width” attributes would not correspond:
Here is my code:
const aspect = 619 / 280
const svg = d3.select('.canvas')
.append('svg')
.style('display', 'block')
.attr('width', 619)
.attr('height', 280)
let x = d3.scaleBand().padding(0.1)
let y = d3.scaleLinear()
const margin = {top:50, bottom:50, left: 50, right: 50}
const graph = svg.append('g')
.attr('transform', `translate(${margin.left},${margin.top})`)
const xAxisGroup = graph.append('g')
const yAxisGroup = graph.append('g')
d3.csv('./SixContinentFirst.csv').then(data => {
africaData = data.map(obj => {
return {infected: +(obj.Africa || '0'), date: obj.Dates}
})
x.domain(africaData.map(item => item.date));
y.domain([0, d3.max(africaData, function (d) { return d.infected; })]);
const size = d3.select('.canvas').node().getBoundingClientRect()
resize(size.width, size.height)
})
function resize(width, height){
svg.attr("width", width);
svg.attr("height", width / aspect);
const graphWidth = width - margin.left - margin.right
const graphHeight = height - margin.top - margin.bottom
graph.attr('width', graphWidth)
.attr('height', graphHeight)
xAxisGroup.attr('transform', `translate(0, ${graphHeight})`) // MOVE X AXIS TO BOTTOM
x.range([0,graphWidth])
y.range([graphHeight,0])
let formatter = Intl.NumberFormat('en', { notation: 'compact' });
const yAxis = d3.axisRight(y)
.ticks(3)
.tickFormat(d => formatter.format(+d))
const xAxis = d3.axisBottom(x)
.tickFormat((d,i) => i % 6 === 0 ? d : '')
xAxisGroup.call(xAxis)
.call(g => g.select('.domain').remove())
.call(g => g.selectAll('line').remove())
.selectAll('text')
.attr("font-size", "10")
yAxisGroup.call(yAxis)
.attr('transform', `translate(${graphWidth}, 0)`)
.call(g => g.select('.domain').remove())
.call(g => g.selectAll('line').remove())
.selectAll('text')
.attr("font-size", "10")
const rects = graph.selectAll('rect')
.data(africaData)
.join(
function (enter) {
return enter.append('g')
.attr('class', "rect-container")
.append('rect')
.attr('width', x.bandwidth)
.attr('height', d => graphHeight)
.attr('fill', 'none')
.attr('x', (d) => x(d.date))
.attr('y', d => 0)
.attr('pointer-events', 'all')
.on('mouseover', function(d, i) {
console.log("Mouse Over")
})
.on('mouseout', function(d, i) {
console.log("Mouse Out")
})
.select(function () {
return this.parentElement
})
.append('rect')
.attr('width', x.bandwidth)
.attr('height', d => graphHeight - y(d.infected))
.attr('fill', 'orange')
.attr('id', (d, i) => `bar_${d.date}`)
.attr('class', "foreground-rect")
.attr('x', (d) => x(d.date))
.attr('y', d => y(d.infected))
.attr('rx', 8)
.attr('ry', 8)
.attr('pointer-events', 'all')
.on('mouseover', function(d, i) {
console.log("Mouse Over")
})
.on('mouseout', function(d, i) {
console.log("Mouse Out")
})
},
function (update) {
return update.attr('width', x.bandwidth)
.attr('height', d => graphHeight - y(d.infected))
.attr('fill', 'orange')
.attr('id', (d, i) => `bar_${d.date}`)
.attr('class', "foreground-rect")
.attr('x', (d) => x(d.date))
.attr('y', d => y(d.infected))
.attr('rx', 8)
.attr('ry', 8)
.attr('pointer-events', 'all')
.on('mouseover', function(d, i) {
console.log("Mouse Over")
})
.on('mouseout', function(d, i) {
console.log("Mouse Out")
})
},
function (exit) {
return exit.remove()
}
)
}
const myObserver = new ResizeObserver(entries => {
entries.forEach(entry => {
resize(entry.contentRect.width,entry.contentRect.height )
console.log("Resize")
});
});
myObserver.observe(document.querySelector('.canvas'))
