Javascript 当容器应用了转换时，如何使数据适合容器

我有一个SVG图表，y轴是用负像素位置创建的。。。这使我应用了一个变换，并在35px上平移图表，以补偿负位置。在这样做的过程中，它切断了我数据的最后一部分。我如何重新安排，使数据都能放入容器中

我尝试将y轴标签分离出来，放在自己的svg中，并使用flexbox将其放在主数据svg旁边，但仍然无法看到数据的悬垂。也许我还没有解决这个问题

<div class="total-chart-wrapper" id="total-chart-wrapper">
  <svg id="total-chart" height="285" width="100%">
    <defs>
        <linearGradient id="total-gradient" gradientTransform="rotate(90)">
          <stop offset="0" stop-color="rgba(76, 150, 254, 1.00)"/>
          <stop offset="0.5" stop-color="rgba(76, 150, 254, 0.70)"/>
          <stop offset="1" stop-color="rgba(255, 255, 255, 0.000)"/>
        </linearGradient>
    </defs>
    <g transform="translate(40,40)">
    <g class="y axis" id="total-y-ticks">
      <line class="y-axis-zero-line axis-line" id="y-axis-zero-line-total" x1="0" y1="0" x2="0" y2="240"></line>
    </g>
      <g><polygon id="total-chart-polygon" fill="url('#total-gradient')"></polygon></g>
      <g class="x axis" id="total-x-ticks" transform="translate(0,0)">
        <line class="x-axis-zero-line axis-line" id="x-axis-zero-line-total" x1="0" y1="240" x2="600" y2="240"></line>
      </g>
    </g>
  </svg>
</div>

将所有代码放在这里太长了，因此这里有一个功能性的代码笔：

如果检查数据/多边形，您可以看到它在末尾截断了一些数据

预期结果是将所有数据放入svg。

---

实际结果是看不见的数据悬垂，可能是由于在包含图表的g上应用了变换。到目前为止，我还无法解决这个问题，因为y标签中的负边距使它们位于图表原点的左侧。有什么帮助吗？

您的父div设置为600像素。 因此，父对象太小，无法容纳SVG。 通过使用transform，您还将SVG进一步推出包装器

.total-chart-wrapper {
    width: 600px;
}

改为：

.total-chart-wrapper {
    width: auto;
}

---

它将工作正常（它将选择SVG宽度）

您的父div设置为600像素。 因此，父对象太小，无法容纳SVG。 通过使用transform，您还将SVG进一步推出包装器

.total-chart-wrapper {
    width: 600px;
}

改为：

.total-chart-wrapper {
    width: auto;
}

---

它将很好地工作（它将选择SVG宽度）

在Javascript中更改

常量totalChartWidth

，如下所示：

const totalChartWidth = document.getElementById('total-chart-wrapper').offsetWidth - 50;

-50

将在左侧显示50px，并将图表完全放入600px父分区

您可以将此

-50

更改为一些代码，这些代码可以动态计算此垫片的大小，以使其更具响应性

请记住，尽管代码的设置方式是这样的，但这些值仅在页面加载时获得，因此图表在简单调整窗口大小时不会响应。调整页面大小后需要刷新页面，以便查看效果

//条形容器总宽度35 px
//格式化前的标签
常量标签=[
[‘星期三’、‘晚上11点’]，
[星期四上午十二时],，
[星期四上午一时],，
[星期四上午二时],，
[星期四上午三时],，
[星期四上午四时],，
[星期四上午五时],，
[星期四上午六时],，
[星期四上午七时],，
[星期四上午八时],，
[星期四上午九时],，
[星期四上午十时],，
[星期四上午11时],，
[星期四下午十二时],，
[星期四下午1时],，
[星期四下午二时],，
[星期四下午三时],，
[星期四下午四时],，
[星期四下午五时],，
[星期四下午六时],，
[星期四下午七时],，
[星期四晚上八时],，
[星期四晚上九时],，
[星期四晚上十时],，
[星期四晚上11时],，
[星期五上午十二时],，
[星期五上午1时],，
[星期五上午二时],，
[星期五上午三时],，
[星期五上午四时],，
[星期五上午五时],，
];
//数据点
常数数据=[
0.25,
0.56,
0.5,
0.5,
0.86,
0.45,
0.3,
0,
0.3,
0.6,
0.4,
0,
0,
0.8,
0,
0,
0.4,
0.3,
0.1,
0,
0,
0.2,
0,
0,
0.4,
0.7,
0.1,
0.6,
0.4,
0.6,
0.4,
];
//函数计算最大Y刻度
功能yAxisRangeImperial（最大值）{
如果（最大值<1）{
返回1；
}否则如果（最大值<2）{
返回2；
}否则如果（最大值<4）{
返回4；
}否则，如果（最大值<8）{
返回8；
}否则，如果（最大值<12）{
返回12；
}否则，如果（最大值<24）{
返回24；
}否则，如果（最大值<48）{
返回48；
}否则，如果（最大值<72）{
返回72；
}否则，如果（最大值<96）{
返回96；
}否则{
返回192；
}
};
//面积图
//所有降雪的总和
const maxTotalValue=data.reduce（函数（acc，val）{return acc+val；}，0）；
//按ID获取图表组件
const totalChart=document.getElementById（'total-chart'）；
const totalXAxis=document.getElementById（'total-x-ticks'）；
const totalYAxis=document.getElementById（'total-y-ticks'）；
const totalPolygon=document.getElementById（'total-chart-polygon'）；
const totalChartWidth=document.getElementById（'total-chart-wrapper'）。offsetWidth-50；
//用于确定小时显示间隔的函数
功能小时LabelTotalInterval（小时）{
如果（小时=0；j--）{
如果（j！==0）{
tickContainer.innerHTML+=''+勾号[j]+''
}否则{
tickContainer.innerHTML+=''+勾号[j]+''
}
};
};
//用于创建累积区域的函数
函数累加点（数据，最大值）{
让间距=总图表宽度/data.length；
设maxYTick=yAxisRangeImperial（max）；
设summedDataSet=data.map（Number）；
summedDataSet=summedDataSet.map（（elem，index）=>summedDataSet.slice（0，index+1）。reduce（（a，b）=>a+b））；
summedDataSet=summedDataSet.map（函数（每个元素）{
返回编号（每个_元素toFixed（2））；
});
求和数据集反移位（0）；
对于（让i=0；i在Javascript中更改
常量totalChartWidth
，如下所示：

const totalChartWidth = document.getElementById('total-chart-wrapper').offsetWidth - 50;

-50
将在左侧显示50px，并将图表完全放入600px父分区

您可以将此
-50
更改为一些代码，这些代码可以动态计算此垫片的大小，以使其更具响应性

请记住，尽管代码的设置方式是这样的，但这些值仅在页面加载时获得，因此图表在简单调整窗口大小时不会做出响应。调整大小后需要刷新页面，以便查看效果


//条形容器总宽度35 px
//格式化前的标签
常量标签=[
[‘星期三’、‘晚上11点’]，
[星期四上午十二时],，
[星期四上午一时],，
[星期四上午二时],，
[星期四上午三时],，
[星期四上午四时],，
[星期四上午五时],，
[星期四上午六时],，
[星期四上午七时],，
[星期四上午八时],，
[星期四上午九时],，
[星期四上午十时],，
[星期四上午11时],，
[星期四下午十二时],，
[星期四下午1时],，
['Th