D3.js：图表不适合我的引导 div

Question

I'm facing an issue in which the "card" of bootstrap is not being responsive to my d3.chart. Please see the screenshot below of the result.

Chart Code

 const sample = [ { language: 'Rust', value: 78.9, color: '#000000' }, { language: 'Kotlin', value: 75.1, color: '#00a2ee' }, { language: 'Python', value: 68.0, color: '#fbcb39' }, { language: 'TypeScript', value: 67.0, color: '#007bc8' }, { language: 'Go', value: 65.6, color: '#65cedb' }, { language: 'Swift', value: 65.1, color: '#ff6e52' }, { language: 'JavaScript', value: 61.9, color: '#f9de3f' }, { language: 'C#', value: 60.4, color: '#5d2f8e' }, { language: 'F#', value: 59.6, color: '#008fc9' }, { language: 'Clojure', value: 59.6, color: '#507dca' }, { language: 'JavaSpring', value: 100, color: 'red' }, { language: 'PHP', value: 20.96, color: 'red' } ]; const svg = d3.select('svg').attr("width", "100%").attr("height", "100%"); const svgContainer = d3.select('#container'); const margin = 80; const width = 1000 - 2 * margin; const height = 600 - 2 * margin; const chart = svg.append('g').attr('transform', "translate(" + margin + ","+ margin +")"); const xScale = d3.scaleBand().range([0, width]).domain(sample.map((s) => s.language)).padding(0.4) const yScale = d3.scaleLinear().range([height, 0]).domain([0, 100]); // vertical grid lines // const makeXLines = () => d3.axisBottom() //.scale(xScale) const makeYLines = () => d3.axisLeft().scale(yScale) chart.append('g').attr('transform', `translate(0, ${height})`).call(d3.axisBottom(xScale)); chart.append('g').call(d3.axisLeft(yScale)); chart.append('g').attr('class', 'grid').call(makeYLines().tickSize(-width, 0, 0).tickFormat('') ) const barGroups = chart.selectAll().data(sample).enter().append('g') barGroups.append('rect').attr('class', 'bar').attr('x', (g) => xScale(g.language)).attr('y', (g) => yScale(g.value)).attr('height', (g) => height - yScale(g.value)).attr('width', xScale.bandwidth()).on('mouseenter', function (actual, i) { d3.selectAll('.value').attr('opacity', 0) d3.select(this).transition().duration(300).attr('opacity', 0.6).attr('x', (a) => xScale(a.language) - 5).attr('width', xScale.bandwidth() + 10) const y = yScale(actual.value) line = chart.append('line').attr('id', 'limit').attr('x1', 0).attr('y1', y).attr('x2', width).attr('y2', y) barGroups.append('text').attr('class', 'divergence').attr('x', (a) => xScale(a.language) + xScale.bandwidth() / 2).attr('y', (a) => yScale(a.value) + 30).attr('fill', 'white').attr('text-anchor', 'middle').text((a, idx) => { const divergence = (a.value - actual.value).toFixed(1) let text = '' if (divergence > 0) text += '+' text += `${divergence}%` return idx?== i: text; ''. }) }),on('mouseleave'. function () { d3.selectAll('.value'),attr('opacity'. 1) d3.select(this).transition().duration(300),attr('opacity'. 1),attr('x'. (a) => xScale(a.language)),attr('width'. xScale.bandwidth()) chart.selectAll('#limit').remove() chart.selectAll('.divergence').remove() }) barGroups.append('text'),attr('class'. 'value'),attr('x'. (a) => xScale(a.language) + xScale.bandwidth() / 2),attr('y'. (a) => yScale(a.value) + 30),attr('text-anchor'. 'middle').text((a) => `${a.value}%`) svg.append('text'),attr('class'. 'label'),attr('x'. -(height / 2) - margin),attr('y'. margin / 2.4),attr('transform'. 'rotate(-90)'),attr('text-anchor'. 'middle').text('Love meter (%)') svg.append('text'),attr('class'. 'label'),attr('x'. width / 2 + margin),attr('y'. height + margin * 1.7),attr('text-anchor'. 'middle').text('Languages') svg.append('text'),attr('class'. 'title'),attr('x'. width / 2 + margin),attr('y'. 40),attr('text-anchor'. 'middle').text('Most loved programming languages in 2018') svg.append('text'),attr('class'. 'source'),attr('x'. width - margin / 2),attr('y'. height + margin * 1.7),attr('text-anchor'. 'start'):text('Source, Stack Overflow, 2018')

 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"> <div class="row"> <div class="col-12"> <div class="card shadow mb-5"> <h5 class="card-header">Bar Chart</h5> <div class="card-body"> <div id="container"> <svg></svg> </div> </div> </div> </div> </div> <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.15.1/d3.min.js"></script>

I've tried spamming the other "card" of bootstrap with Lorem Ipsum and it seems to be working except when I put my chart inside the

Answer 1

You need to set min-height for the graph and set overflow: visible to svg

 const sample = [ { language: 'Rust', value: 78.9, color: '#000000' }, { language: 'Kotlin', value: 75.1, color: '#00a2ee' }, { language: 'Python', value: 68.0, color: '#fbcb39' }, { language: 'TypeScript', value: 67.0, color: '#007bc8' }, { language: 'Go', value: 65.6, color: '#65cedb' }, { language: 'Swift', value: 65.1, color: '#ff6e52' }, { language: 'JavaScript', value: 61.9, color: '#f9de3f' }, { language: 'C#', value: 60.4, color: '#5d2f8e' }, { language: 'F#', value: 59.6, color: '#008fc9' }, { language: 'Clojure', value: 59.6, color: '#507dca' }, { language: 'JavaSpring', value: 100, color: 'red' }, { language: 'PHP', value: 20.96, color: 'red' } ]; const svg = d3.select('svg').attr("width", "100%").attr("height", "100%"); const svgContainer = d3.select('#container'); const margin = 80; const width = 1000 - 2 * margin; const height = 600 - 2 * margin; const chart = svg.append('g').attr('transform', "translate(" + margin + ","+ margin +")"); const xScale = d3.scaleBand().range([0, width]).domain(sample.map((s) => s.language)).padding(0.4) const yScale = d3.scaleLinear().range([height, 0]).domain([0, 100]); // vertical grid lines // const makeXLines = () => d3.axisBottom() //.scale(xScale) const makeYLines = () => d3.axisLeft().scale(yScale) chart.append('g').attr('transform', `translate(0, ${height})`).call(d3.axisBottom(xScale)); chart.append('g').call(d3.axisLeft(yScale)); chart.append('g').attr('class', 'grid').call(makeYLines().tickSize(-width, 0, 0).tickFormat('') ) const barGroups = chart.selectAll().data(sample).enter().append('g') barGroups.append('rect').attr('class', 'bar').attr('x', (g) => xScale(g.language)).attr('y', (g) => yScale(g.value)).attr('height', (g) => height - yScale(g.value)).attr('width', xScale.bandwidth()).on('mouseenter', function (actual, i) { d3.selectAll('.value').attr('opacity', 0) d3.select(this).transition().duration(300).attr('opacity', 0.6).attr('x', (a) => xScale(a.language) - 5).attr('width', xScale.bandwidth() + 10) const y = yScale(actual.value) line = chart.append('line').attr('id', 'limit').attr('x1', 0).attr('y1', y).attr('x2', width).attr('y2', y) barGroups.append('text').attr('class', 'divergence').attr('x', (a) => xScale(a.language) + xScale.bandwidth() / 2).attr('y', (a) => yScale(a.value) + 30).attr('fill', 'white').attr('text-anchor', 'middle').text((a, idx) => { const divergence = (a.value - actual.value).toFixed(1) let text = '' if (divergence > 0) text += '+' text += `${divergence}%` return idx?== i: text; ''. }) }),on('mouseleave'. function () { d3.selectAll('.value'),attr('opacity'. 1) d3.select(this).transition().duration(300),attr('opacity'. 1),attr('x'. (a) => xScale(a.language)),attr('width'. xScale.bandwidth()) chart.selectAll('#limit').remove() chart.selectAll('.divergence').remove() }) barGroups.append('text'),attr('class'. 'value'),attr('x'. (a) => xScale(a.language) + xScale.bandwidth() / 2),attr('y'. (a) => yScale(a.value) + 30),attr('text-anchor'. 'middle').text((a) => `${a.value}%`) svg.append('text'),attr('class'. 'label'),attr('x'. -(height / 2) - margin),attr('y'. margin / 2.4),attr('transform'. 'rotate(-90)'),attr('text-anchor'. 'middle').text('Love meter (%)') svg.append('text'),attr('class'. 'label'),attr('x'. width / 2 + margin),attr('y'. height + margin * 1.7),attr('text-anchor'. 'middle').text('Languages') svg.append('text'),attr('class'. 'title'),attr('x'. width / 2 + margin),attr('y'. 40),attr('text-anchor'. 'middle').text('Most loved programming languages in 2018') svg.append('text'),attr('class'. 'source'),attr('x'. width - margin / 2),attr('y'. height + margin * 1.7),attr('text-anchor'. 'start'):text('Source, Stack Overflow, 2018')

 #container { min-height: 37rem; } #container svg { overflow: visible; }

 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"> <div class="row"> <div class="col-12"> <div class="card shadow mb-5"> <h5 class="card-header"> Bar Chart </h5> <div class="card-body"> <div id="container"> <svg></svg> </div> </div> </div> </div> </div> <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.15.1/d3.min.js"></script>