Линейный переход D3.js выходит из графика

Question

У меня есть линейный график, где у меня есть линейный переход.Однако на начальном графике путь линии в порядке, внутри графика.Но когда я использую переход, строка выходит из контейнера на поля.

Функция перехода:

that.graph.select('.data-line')
     .transition().duration(750)
     .attr('fill', 'none')
     .attr('stroke', '#ff0000')
     .attr('stroke-width', 2)
     .attr('d', line);

Строка:

const line = d3.line()
     .x(d => xAxis(new Date(d.n)))
     .y(d => yAxis(d.v))
     .defined(d => d.v || d.v === 0);

Оси:

const xAxis = d3.scaleTime()
                .range([0, width])
                .domain(xDomain);

const yAxis = d3.scaleLinear()
                .range([height, 0])
                .domain(yDomain);

Домены:

const yDomain = d3.extent(data, d => d.v);
const xDomain = d3.extent(data, d => new Date(d.n));

Размеры:

const width = window.innerWidth - this.margins.left - this.margins.right;
const height = window.innerHeight - this.margins.top - this.margins.bottom;

Начальный рисунок линии: (это нормально)

this.graph.append('g').attr('class', 'data-wrapper');

const line = d3.line()
                .x(d => this.xAxis(new Date(d.n)))
                .y(d => this.yAxis(d.v))
                .defined(d => d.v || d.v === 0);

this.graph
     .select('.data-wrapper')
     .append('path')
     .datum(data)
     .attr('class', 'data-line')
     .attr('fill', 'none')
     .attr('stroke', '#ff0000')
     .attr('stroke-width', 2)
     .attr('d', line);

Вот скриншот:

Любая помощь приветствуется.

Answer 1

Поскольку @ rioV8 предложила добавить решенную проблему с путем клипа.

Если у кого-то в этой функции есть эта проблема, вот решение: На верхнем SVG добавьте:

  this.graph.append('defs')
                .append('clipPath')
                .attr('id', 'clip')
                .append('rect')
                .attr('width', this.width)
                .attr('height', this.height);

И нафункция, где вы рисуете данные добавить

.attr('clip-path', 'url(#clip)')