D3 js преобразование масштаба для создания пути в линейном графике не работало - PullRequest
Новая
       23

D3 js преобразование масштаба для создания пути в линейном графике не работало

1 голос
/ 25 апреля 2020

Пытаясь сгенерировать несколько линейных графиков, используя библиотеку d3 js, у меня был набор данных, и я использовал линейную шкалу для осей x и y.

созданный линейный график пересекал границы SVG и одна какая-то часть строк отображается. Ожидается Фактически How it was behaving

data = [
{
values:[
{x:2,y:3},
{x:4,y:5}
]
}
,
{
values:[
{x:2,y:3},
{x:4,y:5}
]
}
];
let xScale = d3
            .scaleLinear()
            .domain([min, max])
            .range([0, width]);
let yScale = d3
        .scaleLinear()
        .domain([min, max])
        .rangeRound([this.height, 0]);

 this.svg = d3
      .select('#chart')
      .append('svg')
      .attr('width', gWidth + 'px')
      .attr('height', gHeight + 'px') // for lables
      .append('g')
      .attr('transform', `translate(${this.margin.left}, ${this.margin.top})`);

    let line = d3
      .line()
      .x((d: any) => this.xScale(d.x))
      .y((d: any) => this.yScale(d.y));
    let lines = this.svg.append('g').attr('class', 'lines');

    lines
      .selectAll('.line-group')
      .data(data)
      .enter()
      .append('g')
      .attr('class', 'line-group')
      .append('path')
      .attr('class', 'line')
      .attr('d', d => line(d.values))
      .style('stroke', (d, i) => this.color(i))
      .style('opacity', 1);
...