d3.js chart not respecting margins

Question

So I'm defining the margins here:

  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;

Drawing the chart here

    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');
        });

And this is the div structure of the chart:

        <div className="svg-parent">
          <div className="stats">
            <h5>Confirmed {datapoint['date']}</h5>
            <div className="stats-bottom">
               ...
            </div>
          </div>
          <svg ref={graphElement1} width="650" height="100" viewBox="0 0 650 100" preserveAspectRatio="xMidYMid meet"/>
        </div>

And this is the CSS:

  .svg-parent {
    display: flex;
    flex: 0.9;
    flex-direction: row;
    justify-content: center;
    width: 100%;
    svg {
      align-self: center;
    }
  }

I've tried a lot of CSS rules to allow the svg to respect the margin definition but I can't seem to make it work. I'm unable to show the x-axis also as a result.

This is how it looks right now, the right margin works, however,

[Edited; even after setting left value the graph does not shift right]

Answer 1

As explained in this tutorial:

These margins will be used to inset the ranges of our scales. Rather than extending from 0 to the full width and height of the chart, the starts and ends of the ranges are moved inward by the corresponding margins.

So for the x axis scale, replace .range([0, width]) by:

.range([margin.left, width])

And similary, for the y axis, try the following for the range definition:

.range([height, margin.top])