What i did was, I divided the data values by multiples of 10 through trial and error. I think d3 would just plot data out of it's range if it's too large, because once I divided the values they were scaled perfectly.

                    .attr('cx', d => xScale(d.foreign_investement/10000))
                    .attr('cy', d => yScale(d.earnings/1000))
However, my data was fixed and I was not planning to scale up my graph. The clipPath would be the ideal solution for me too but I don't know how to use it yet.


You can limit which points are displayed using defined

Every sample gets passed through the function and where it returns false, the points aren't shown...

var line = d3.line()
    .defined(function(d) { 
       return d.x < xMax && dx > xMin && d.y > yMin && d.y< yMax; 
    .x(function(d) { return x(d.x); })
    .y(function(d) { return y(d.y); });

Alternatively, you can use a clip-path like in this example.

Related Query