D3：条形图在窗口调整大小时不调整大小，用于条形图

Question

我尝试了多种方法来做到这一点，没有一个工作。 有些打破了我的图表，大多数根本不起作用。 尝试了2种主要方法：

• 使用'viewBox'：我一定是用错了
• 使用d3.select(window).on('resize' function() { // resize }) ：根本不起作用

我只是在做一些完全错误或过时的事情吗？ 现在只是学习一些D3的基础知识。

使用 d3 v7，相当简单的代码：相同的 jsFiddle： https ://jsfiddle.net/5n7Lm80b/

请注意，注释掉的代码主要是我尝试过的东西。

import * as d3 from "https://cdn.skypack.dev/d3@7.4.4";

const dataset = [
{
timestamp: "2022-05-16T21:15:00+00:00",
value: 1,
},
{
timestamp: "2022-05-16T21:18:00+00:00",
value: 2,
},
{
timestamp: "2022-05-16T21:21:00+00:00",
value: 1,
},
{
timestamp: "2022-05-16T21:30:00+00:00",
value: 1,
}
];

const svgWidth = document.body.offsetWidth, // document.querySelector('.class').offsetWidth;
      svgHeight = 300,
      barPadding = 5,
      barWidth = (svgWidth / dataset.length);

// Define container
const svg = d3.select('svg')
  // .attr('viewbox', [0,0,800,svgHeight])
  // .attr('preserveAspectRatio', 'xMinYmin meet');
  // .attr('width', svgWidth) // allows content/bars to take up 
  // .attr('width', document.querySelector('.viewport').offsetWidth) // allows content/bars to take up entire width of container
  .attr('height', svgHeight);

// y scale
const yScale = d3.scaleLinear()
  .domain([0, d3.max(
    dataset,
    function(d) { 
      return d.value;
    }
  )])
  .range([0, svgHeight]);

// Define actual chart
const barChart = svg.selectAll('rect')
  // .append('svg')
  // .attr('viewBox', '0,0,400,400')
  .data(dataset)
  .enter()
  .append('rect')
  // .attr('viewBox', '0,0,1000,400')
  .attr('y', function(d) {
    return svgHeight - yScale(d.value);
  })
  .attr('height', function(d) {
    return yScale(d.value);
  })
  .attr('width', (document.querySelector('.viewport').offsetWidth / dataset.length) - barPadding)
  .attr('transform', function(d, i) {
    const translate = [barWidth * i, 0];
    return `translate(${translate})`;
  })
  .attr('stroke', 'blue')
  .attr('fill', 'none');

d3.select(window).on('resize', function() {
  console.log('resize', document.querySelector('.viewport').offsetWidth);
  
  svg.selectAll('rect').attr('width', (document.querySelector('.viewport').offsetWidth / dataset.length) - barPadding);
})


// y axis
const yAxisScale = d3.scaleLinear()
  .domain([0, d3.max(
    dataset,
    function(d) { 
      return d.value;
    }
  )])
  .range([svgHeight, 0]); // goes backwards=>bottom to top (negative)

const yAxis = d3.axisLeft()
  .scale(yAxisScale);

svg.append('g')
  .call(yAxis)
  .attr('transform', 'translate(20, 10)')
  .attr('color', 'green');


// Will address scaling the below once bars rescale

// x scale
const parser = d3.timeParse('%Y-%m-%dT%H:%M:%S%Z');

const xAxisScale = d3.scaleTime()
  .domain([parser("2022-05-16T14:12:00+00:00"), parser("2022-05-16T20:12:00+00:00")])
  .nice()
  .range([0, svgWidth]);

const xAxis = d3.axisBottom()
  .scale(xAxisScale);

svg.append('g')
  .call(xAxis)
  .attr('transform', `translate(0, ${svgHeight - 20})`)
  .attr('color', 'red');

<div class="viewport"><svg class="svg"></svg></div>

 .svg {
/*   margin-left: 30px; */
   width: 100%; /* gets svg to resize */
 }
.viewport {
/*   height: 500px; */
  width: 100%; /* gets container to resize*/
  border: 1px solid magenta;
  
  display: inline-block;
  position: relative;
  vertical-align: top;
  overflow: hiden;
/*   padding-bottom: 100%; */
}
/* .svg {
  display: inline-block;
  position: absolute;
  top: 10;
  left: 0;
} */

Answer 1

好的，所以我仍然不确定如何使用“viewbox”，但似乎我的代码.on('resize', function() {})代码正在运行。 我只需要将“转换”属性也添加到我的回调函数中。

干杯。