score:1

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.

.append("circle")
                    .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.

score:7

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