Javascript 如何让我的图表元素展开？它们目前都是堆叠的

我试图为svg图表创建g元素，但它们都是堆叠在一起的，尽管我试图在它们上设置变换距离

我尝试过的事情：使用“setAttribute”为每个对象添加变换-平移距离。这似乎没有任何作用

        let tick = document.createElementNS(svg, "g");
        tick.setAttributeNS(svg, "transform", "translate("+ translateDistance +",0)");
        tick.setAttributeNS(svg, "class", "tick");

        let line = document.createElementNS(svg, "line");
        line.setAttributeNS(svg, "class", "y-axis-zero-line axis-line dash gray");
        line.setAttributeNS(svg, "x1", "-13");
        line.setAttributeNS(svg, "y1", "0");
        line.setAttributeNS(svg, "x2", "-13");
        line.setAttributeNS(svg, "y2", "240");
        tick.appendChild(line);

        let textDay = document.createElementNS(svg, "text");
        textDay.setAttributeNS(svg, "class", "label-day");
        textDay.setAttributeNS(svg, "dy", "0.71em");
        textDay.setAttributeNS(svg, "y", "-28");
        textDay.setAttributeNS(svg, "x", "0");
        let textDayNode = document.createTextNode(formattedLabels[i][0]);
        textDay.appendChild(textDayNode);
        tick.appendChild(textDay);

        let textTime = document.createElementNS(svg, "text");
        textDay.setAttributeNS(svg, "class", "label-time");
        textDay.setAttributeNS(svg, "dy", "0.71em");
        textDay.setAttributeNS(svg, "y", "-15");
        textDay.setAttributeNS(svg, "x", "0");
        let textTimeNode = document.createTextNode(formattedLabels[i][1]);
        textTime.appendChild(textTimeNode);
        tick.appendChild(textTime);

        totalXAxis.appendChild(tick);

以下是一个可编辑的示例：

预期结果是刻度线在图表顶部隔开。 实际结果是，刻度都堆叠在图表原点附近，好像变换没有做任何事情

---

有什么帮助吗？

您需要换行

tick.setAttributeNS(svg, "transform", "translate("+ translateDistance +",0)");

到

注意：您将注意到距离计算中的错误，但至少情况正在转变

您使用名称空间（

const svg=”http://www.w3.org/2000/svg“；

）仅当创建新元素时：

let tick=document.createElements（svg，“g”）

设置属性时，不使用名称空间。您使用的是
null
：

tick.setAttributeNS（null，“transform”，“translate”（+translateInstance+”，0）”）


const标签=[
[‘星期一’、‘上午七点’]，
[星期二上午7时],，
[星期二上午8时],，
[星期二上午9点],，
[星期二上午十时],，
[星期二上午11时],，
[‘星期二’、‘下午12点’]
]
const xAxis=document.getElementById（'total-x-ticks'）；
函数createTotalLabels（标签、totalChartWidth、totalXAxis）{
const hours interval=1；
常量svg=”http://www.w3.org/2000/svg";
让间距=总图表宽度/标签长度；
让currentDay=''；
const formattedLabels=labels.map（（label，i）=>{
如果（i%hoursInterval==0）{
如果（标签[0]！==当前日期）{
currentDay=标签[0]；
返回[标签[0]，标签[1]；
}
返回[''，标签[1]]；
}
返回[''，]；
});
for（设i=0；itick.style.transform = "translate("+translateDistance+"px)";