d3 to create data-driven cubic-bezier path

Community Help
1

To create data driven-path, I usually use d3.line generator.

For example, for a data like this

const data = [
    {
        "x": 0,
        "y": 0
    },
    {
        "x": 570.7851851851851,
        "y": 186.66666666666666
    },
    {
        "x": 1067.6148148148147,
        "y": 533.3333333333333
    },
    {
        "x": 1280,
        "y": 720
    }
]

the following generator produces the following path string = M0,0L570.7851851851851,186.66666666666666L1067.6148148148147,533.3333333333333L1280,720

  const pathVal = d3
    .line()
    .x((d) => d.x)
    .y((d) => d.y)(data);

However, I want to create a cubic bezier curve which will require the path-string to be like this = M0,0 C570.7851851851851,186.66666666666666 1067.6148148148147,533.3333333333333 1280,720 in the form of M x0,y0 C x1 y1, x2 y2, x3 y3 where x0,y0 are start anchor point x1,y1 and x2,y2 are control points and x3,y3 are end point- Ref.

How can I ask d3 to generate a path string like above? Is it possible to generate such path using d3.path and /or the same d3.line generator.

A sample notebook here.

1 Like
2

Have a look at d3.path().bezierCurveTo:

1 Like