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])