Can the d3 axis piecewise feature be used to replace discontinuous scales?

[ColinEberhardt]

The D3 scale has a "piecewise" feature that allows you to create a scale with multiple domain / range elements. This has some similarities to the D3FC discontinuous scale.

The following example demonstrates how you can create a linear scale with a 'break' between 75-100 using this feature:

const svg = d3.select('body').append('svg');

svg.append('g')
    .attr('transform', 'translate(0, 20)')
    .call(sel => {
        const scale = fc
            .scaleDiscontinuous(d3.scaleLinear())
            .discontinuityProvider(fc.discontinuityRange([50, 75]))
            .domain([0, 100])
            .range([0, 600]);

        d3.axisBottom(scale)(sel);
    });

svg.append('g')
    .attr('transform', 'translate(0, 60)')
    .call(sel => {
        const scale = d3
            .scaleLinear()
            .domain([0, 50, 75, 100])
            .range([0, 400, 400, 600]);

        d3.axisBottom(scale)(sel);
    });

This yields the following result:

One possible option would be to use this functionality to simplify the implementation of fc.scaleDiscontinuous, however, it would still need work to remove ticks from within the discontinuities.

[ColinEberhardt]

see: d3/d3-scale#222