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