score:1

Your code is iterating over the breaks array and setting the discontinuityProvider property on each iteration. Each time you set this property, you override the previous value!

The solution is to provide multiple 'breaks' directly to the discontinuity provider:

const scale = fc.scaleDiscontinuous(d3.scaleLinear());
  .discontinuityProvider(fc.discontinuityRange([10,20], [50,80]))
  .domain([ 100, 0])
  .range([content_width,0]);

Related Query