d3.js 图表不考虑边距

Question

所以我在这里定义边距：  const svg1 = d3.select(graphElement1.current);  const margin = {top: 0, right: 30, bottom: 10, left: 10};  const width = 650 - margin.left - margin.right;  const height = 100 - margin.top - margin.bottom;在这里绘制图表    const data = timeseries;    const x = d3.scaleTime()        .domain(d3.extent(data, function(d) {          return new Date(d['date']+'2020');        }))        .range([0, width]);    const y = d3.scaleLinear()        .domain([0, d3.max(data, function(d) {          return +d['totalconfirmed'];        })])        .range([height, 0]);    svg1.append('g')        .attr('transform', 'translate(0,' + height + ')')        .attr('class', 'axis')        .call(d3.axisBottom(x));svg1.append('path')        .datum(data)        .attr('fill', 'none')        .attr('stroke', '#ff073a99')        .attr('stroke-width', 5)        .attr('cursor', 'pointer')        .attr('d', d3.line()            .x(function(d) {              return x(new Date(d['date']+'2020'));            })            .y(function(d) {              return y(d['totalconfirmed'])-5;            })            .curve(d3.curveCardinal),        );    svg1.selectAll('.dot')        .data(data)        .enter()        .append('circle')        .attr('fill', '#ff073a')        .attr('stroke', '#ff073a')        .attr('r', 3)        .attr('cursor', 'pointer')        .attr('cx', function(d) {          return x(new Date(d['date']+'2020'));        })        .attr('cy', function(d) {          return y(d['totalconfirmed'])-5;        })        .on('mouseover', (d, i) => {          d3.select(d3.event.target).attr('r', '5');          setDatapoint(d);          setIndex(i);        })        .on('mouseout', (d) => {          d3.select(d3.event.target).attr('r', '3');        });我已经尝试了很多 CSS 规则来允许 svg 尊重边距定义，但我似乎无法使其工作。结果我也无法显示 x 轴。这就是现在的样子，右边距有效，但是，

Answer 1

解释的：

这些边距将用于插入我们的比例范围。范围的起点和终点向内移动相应的边距，而不是从 0 延伸到图表的整个宽度和高度。

因此，对于x轴刻度，替换.range([0, width])为：

.range([margin.left, width])

类似地，对于y轴，请尝试以下范围定义：

.range([height, margin.top])