Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Clipping to chart area #35

Open
ashic opened this issue Apr 13, 2021 · 0 comments
Open

Clipping to chart area #35

ashic opened this issue Apr 13, 2021 · 0 comments

Comments

@ashic
Copy link

ashic commented Apr 13, 2021

I'm using nivo.rocks (which is a react d3 wrapper) to chart a scatterplot, and adding a layer to add curves. On one of my datasets, with a quadratic curve, the curve is going below 0. None of the datapoints is negative, and I was wondering if there's a way to limit the path so that the curve doesn't go out of axis bounds.

The code looks like:

const regressionGenerator = regressionQuad()
      .x(d => d.data.x)
      .y(d => d.data.y);

    const lineGenerator = line()
        .x(d => xScale(d[0]))
        .y(d => yScale(d[1]))

    const groupedNodes = _.groupBy(nodes, x => x.data['serieId'])
    const lines = []

    for(const k in groupedNodes){
        const values = groupedNodes[k]
        if(_.size(values)) {
            const filtered = _.filter(values, x =>x['data']['y'] > 0)
            const sorted = _.sortBy(filtered, 'x')
            const regressed = regressionGenerator(sorted)
            const points = lineGenerator(regressed)
            lines.push(<path d={points} fill="none" key={k} stroke={sorted[0].style.color} strokeWidth={3}></path>)
        }
    }

And the output chart is shown in the attachment.
capture

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant