{
const width = 1280;
const height = 720;
const root = htl.html`<svg viewBox="0 0 ${width} ${height}"><path class="BezierLine2" d="M0,0 C570.7851851851851,186.66666666666666 1067.6148148148147,533.3333333333333 1280,720" stroke="red" fill="none"></path></svg>`;
const svg = d3.select(root);
const rect = svg
.append("rect")
.attr("x", "0")
.attr("y", "0")
.attr("width", `${width}`)
.attr("height", `${height}`)
.attr("fill", `transparent`);
const data = [
{
"x": 0,
"y": 0
},
{
"x": 570.7851851851851,
"y": 186.66666666666666
},
{
"x": 1067.6148148148147,
"y": 533.3333333333333
},
{
"x": 1280,
"y": 720
}
]
const pathVal = d3.path();
pathVal.moveTo(data[0].x,data[0].y)
pathVal.bezierCurveTo(...data.slice(1).map(o => [o.x,o.y]).flat())
console.log(pathVal);
svg.append('g')
.attr('class','test')
.append("path")
.attr("d", pathVal)
.attr("stroke", "blue")
.attr('fill','none')
return root;
}