Javascript模板呈现函数返回未定义的

我的渲染函数为数据中的每个圆返回未定义的。
我有一个可变数量的圆，这就是为什么我需要映射所有的圆。
这是调用渲染函数的正确方法吗？
如何才能正确返回圆

JS

const d = data;

document.getElementById("gElement").innerHTML = `

    ${d.g.map((entry)=> {
        console.log(entry);

        return `
        <g class="${entry.class}" id="${entry.id}">

        <polygon 
           $points ="${entry.polygon.points}">
        </polygon>

        ${render(entry.circle)}

        </g>`
    }).join('')}`

    function render(circ){  
       `${circ.map((entry) =>{

            return`
            <circle
                cx = "${entry.cx}"
                cy = "${entry.cy}"
                r  = "${entry.r}"
                fill = "${entry.fill}">
            </circle>`

        }).join('')}`
    }  

 {
    "id": "gElement",
    "g": [
        {
            "class": "polygon",
            "id": "elements100",
            "polygon": {
                "points": "337,212.00000000000006,352.99999999999994,150,433.99999999999994,147.00000000000006,431,206.00000000000006"
            },
            "circle": [
                {
                    "cx": "337",
                    "cy": "212.00000000000006",
                    "r": "2",
                    "fill": "none"
                },
                {
                    "cx": "352.99999999999994",
                    "cy": "150",
                    "r": "2",
                    "fill": "none"
                },
                {
                    "cx": "433.99999999999994",
                    "cy": "147.00000000000006",
                    "r": "2",
                    "fill": "none"
                },
                {
                    "cx": "431",
                    "cy": "206.00000000000006",
                    "r": "2",
                    "fill": "none"
                }
            ]
         }
      ]
   }

---

不能将模板文本嵌套在彼此之间，因为反勾号会相互干扰。最好将

d.g.map（（entry）=>{…}）

抽象到一个单独的函数中，然后在模板文本中调用该函数

另外，在

render（）

函数中，您不会返回连接的数组。它将返回未定义的

，

，您的圆圈将永远不会被注入HTML。以下脚本应该可以工作：

document.getElementById（“gElement”）.innerHTML=getParsedHtml（d）；
函数getParsedHtml（数据）{
返回数据.g.map（条目=>{
返回`
${render（entry.circle）}
`;
}).加入（“”）；
}
函数渲染（circ）{
返回circ.map（条目=>{
返回`
`;
}).加入（“”）；
}

我注意到多边形的

点

属性中有一个

$

前缀：我想这是打字错误吧

请参见下面的概念验证示例：

const d={
“id”：“gElement”，
“g”：[{
“类”：“多边形”，
“id”：“elements100”，
“多边形”：{
“点数”：“337212.0000000000000 6352.9999999994150433.9999999994147.0000000000000 6431206.0000000000000 6”
},
“圆圈”：[{
“cx”：“337”，
“cy”：“212.00000000000006”，
“r”：“2”，
“填充”：“无”
},
{
“cx”：“352.99999999994 4”，
“cy”：“150”，
“r”：“2”，
“填充”：“无”
},
{
“cx”：“433.99999999994 4”，
“cy”：“147.00000000000006”，
“r”：“2”，
“填充”：“无”
},
{
“cx”：“431”，
“cy”：“206.00000000000006”，
“r”：“2”，
“填充”：“无”
}
]
}]
};
document.getElementById（“gElement”）.innerHTML=getParsedHtml（d）；
函数getParsedHtml（数据）{
返回数据.g.map（条目=>{
返回`
${render（entry.circle）}
`;
}).加入（“”）；
}
函数渲染（circ）{
返回circ.map（条目=>{
返回`
`;
}).加入（“”）；
}

svg{
边框：1px实心#000；
宽度：250px；
高度：250px；
}
多边形{
填充物：灰色；
}
圈{
填充：钢蓝；
}