Javascript 用于在线形图中生成路径的D3js比例转换不起作用

尝试使用d3js库生成多个折线图， 我有一个数据集，使用x轴和y轴的线性比例

生成的线图跨越SVG的边界，并显示一部分线。

---

这些图像与您的数据不符，也与您共享的代码不符。在代码块中，每个刻度域的最小值是相同的：

min

，不清楚该值是多少。在图像中，每个比例都有不同的最小域值，不清楚您是如何设置的。如果没有更多信息，只能猜测：如果显示的代码是您所拥有的代码，那么可能只是您没有考虑用于转换保存绘图的

g

的边距：您的y刻度范围不应该是

[高度，0]

如果绘图的高度应为

gHeight

像素。@Andreweid我提供的数据是样本数据，我已经用这个（）的引用实现了该图，但是我对两个轴都使用了scale-linear。@Andrewerid我怀疑我的line函数没有转换适合SVG大小的数据。最小值和最大值是基于整个数据集计算的值。我正在附加另一张图片，通过更改SVG的大小，我可以找到完整的路径。如果您的line函数没有将数据转换为适合SVG的大小，可能是因为您没有正确定义比例。您的共享代码为x和y显示相同的

[min，max]

域，但您的图像显示的x域为

[0200]

，y域为~

[-.3,1.9]

，这与您的共享代码不匹配。不清楚如何计算最小值和最大值，但问题可能就在这里，或者，尽管有边距，但使用的范围是SVG的全宽/全高，但我也不确定如何定义边距/宽度/高度。这会使回答变得复杂。如果无法再现手头的问题，或者至少看不到您如何定义所有相关内容，那么就不可能提供一个明确的答案来解决您所面临的实际问题。这些图像与您的数据不符，也与您共享的代码不符。在代码块中，每个刻度域的最小值是相同的：

min

，不清楚该值是多少。在图像中，每个比例都有不同的最小域值，不清楚您是如何设置的。如果没有更多信息，只能猜测：如果显示的代码是您所拥有的代码，那么可能只是您没有考虑用于转换保存绘图的

g

的边距：您的y刻度范围不应该是

[高度，0]

如果绘图的高度应为

gHeight

像素。@Andreweid我提供的数据是样本数据，我已经用这个（）的引用实现了该图，但是我对两个轴都使用了scale-linear。@Andrewerid我怀疑我的line函数没有转换适合SVG大小的数据。最小值和最大值是基于整个数据集计算的值。我正在附加另一张图片，通过更改SVG的大小，我可以找到完整的路径。如果您的line函数没有将数据转换为适合SVG的大小，可能是因为您没有正确定义比例。您的共享代码为x和y显示相同的

[min，max]

域，但您的图像显示的x域为

[0200]

，y域为~

[-.3,1.9]

，这与您的共享代码不匹配。不清楚如何计算最小值和最大值，但问题可能就在这里，或者，尽管有边距，但使用的范围是SVG的全宽/全高，但我也不确定如何定义边距/宽度/高度。这会使回答变得复杂。如果无法再现手头的问题，或者至少看不到您如何定义所有相关内容，那么就不可能提供一个确定的答案，说明您所面临的实际问题。

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