Javascript 当SVG中有足够的空间时，为什么图表被压缩在一个框中？

我正在创建一个坡度图，但它被压缩到一个小盒子中，尽管有足够的SVG空间

按照正常流程，我创建了一个较大的画布，其中包含图形的所有元素，包括标签和轴等，然后使用边距，创建了一个较小的画布，其中仅包含图形，不包含轴，但包含一些标签

然后使用线性比例，我添加了线条，希望它占据大画布中减去边距的所有空间

然而，取而代之的是，图形被压缩到一个小得多的盒子里，我不知道为什么。这会导致所有标签相互重叠。而且，它看起来很糟糕，因为其中一个轴正好落在它应该落的地方，这意味着它离图形非常远。

我尝试过改变代码的各个方面，包括扩大线性比例的范围，但这只会导致最小的变化，即线彼此稍微分开，这更令人困惑

我还尝试注释掉所有移动标签的代码，以防止它们重叠，以免导致意外结果。但这不是问题所在

显然，是其他原因导致y值被限制在比表面上更小的空间内。我确实从其他地方复制了这段代码，所以当我修改代码以供自己使用时，可能遗漏了一些东西：

我自己的代码：

// Calculate area chart takes up out of entire svg
  let chartHeight = opts.height - opts.margin.top - opts.margin.bottom;
  let chartWidth = opts.width - opts.margin.left - opts.margin.right;

  let svg = d3
    .select("#chart")
    .append("svg")
    .attr("width", opts.width)
    .attr("height", opts.height);

  // Create scale for positioning data correctly in chart
  let vertScale = d3
    .scaleLinear()
    .domain([0, 100])
    // .range([opts.margin.bottom, chartHeight]);
    .range([0, 500]);

  // First, calculate the right and left side chart placements
  for (let i = 0; i < arrayLength; i++) {
    updatedData[i]["AfterY"] = vertScale(updatedData[i]["Last"]);
    updatedData[i]["BeforeY"] = vertScale(updatedData[i]["First"]);
  }

//A bunch of other code...

// Create slopegraph labels
  svg
    .selectAll("text.labels")
    .data(updatedData)
    .enter()
    .append("text")
    .text(function(d) {
      return d.District;
    })
    .attr("class", function(d) {
      return "label " + d.Change;
    })
    .attr("text-anchor", "end")
    .attr("x", opts.margin.left * 0.6)
    .attr("y", function(d) {
      return opts.margin.top + chartHeight - d.BeforeY;
    })
    .attr("dy", ".35em");

---

这就是整个代码块：

我错误地假设我的数据集值在0-100之间，因为它是一个百分比列，但实际上所有的值都在40-75之间。一旦我将domain调整为.domain[40,75]，这些行就会像预期的那样展开

现在，我必须做出其他决定，即在轴上没有0%值的情况下，图形是否具有误导性。但这个问题可以解决