How to use the d3fc.util function in d3fc

export default function() {
    var charts = [];
    var dispatch = d3.dispatch(event.viewChange);

    function key(d) { return d.option.id; }

    var secDataJoin = fc.util.dataJoin()
        .children(true)
        .selector('.secondary-container')
        .element('svg')
        .attr('class', function(d) {
            return 'secondary-container secondary-' + d.valueString;
        })
        // Issue with elements being regenerated due to data being overwritten. See:
        // https://github.com/ScottLogic/d3fc/blob/0327890d48c9de73a41d901df02bac88dc83e398/src/series/multi.js#L26-L36
        .key(function(d) {
            return key(this.__secondaryChart__ || d);
        });

    function multiChart(selection) {
        selection.each(function(model) {
            var secondaries = secDataJoin(this, charts);

function primary(selection) {
        var model = selection.datum();

        if (model.selectorsChanged) {
            selectorsChanged(model);
        }

        primaryChart.xDomain(model.viewDomain);

        xScale.discontinuityProvider(model.discontinuityProvider);

        crosshair.snap(fc.util.seriesPointSnapXOnly(currentSeries.option, model.visibleData));
        updateCrosshairDecorate(model.visibleData);

        movingAverage(model.data);
        bollingerAlgorithm(model.data);

        // Scale y axis
        // Add percentage padding either side of extreme high/lows
        var extentAccessors = getExtentAccessors(multi.series());
        var paddedYExtent = fc.util.extent()
            .fields(extentAccessors)
            .pad(0.08)(model.visibleData);
        primaryChart.yDomain(paddedYExtent);

        // Find current tick values and add close price to this list, then set it explicitly below
        var latestPrice = currentYValueAccessor(model.data[model.data.length - 1]);
        var tickValuesWithAnnotations = produceAnnotatedTickValues(yScale, [latestPrice]);

function macd(selection) {
        var model = selection.datum();
        algorithm(model.data);

        var paddedYExtent = fc.util.extent()
            .fields(['macd'])
            .symmetricalAbout(0)
            .pad(0.08)(model.data.map(function(d) { return d.macd; }));
        chart.trackingLatest(model.trackingLatest)
            .xDomain(model.viewDomain)
            .yDomain(paddedYExtent);

        selection.call(chart);
    }

.on(event.newTrade, function(data) {
                updateModelData(data);
                if (model.charts.primary.trackingLatest) {
                    var newDomain = util.domain.moveToLatest(
                        model.charts.primary.discontinuityProvider,
                        model.charts.primary.viewDomain,
                        fc.util.extent().fields(['date'])(model.charts.primary.data));
                    onViewChange(newDomain);
                }
            })
            .on(event.historicDataLoaded, function(data) {

export default function() {
    var xScale = fc.scale.dateTime();
    var yScale = d3.scale.linear();
    var barWidth = fc.util.fractionalBarWidth(0.75);
    var xValue = function(d) { return d.date; };
    var xValueScaled = function(d, i) { return xScale(xValue(d, i)); };
    var yLowValue = function(d) { return d.low; };
    var yHighValue = function(d) { return d.high; };
    var yCloseValue = function(d) { return d.close; };

    var candlestickSvg = fc.svg.candlestick()
      .x(function(d) { return xScale(d.date); })
      .open(function(d) { return yScale(d.open); })
      .high(function(d) { return yScale(yHighValue(d)); })
      .low(function(d) { return yScale(yLowValue(d)); })
      .close(function(d) { return yScale(d.close); });

    var upDataJoin = fc.util.dataJoin()
      .selector('path.up')
      .element('path')

var yScale = d3.scale.linear();
    var barWidth = fc.util.fractionalBarWidth(0.75);
    var xValue = function(d) { return d.date; };
    var xValueScaled = function(d, i) { return xScale(xValue(d, i)); };
    var yLowValue = function(d) { return d.low; };
    var yHighValue = function(d) { return d.high; };
    var yCloseValue = function(d) { return d.close; };

    var candlestickSvg = fc.svg.candlestick()
      .x(function(d) { return xScale(d.date); })
      .open(function(d) { return yScale(d.open); })
      .high(function(d) { return yScale(yHighValue(d)); })
      .low(function(d) { return yScale(yLowValue(d)); })
      .close(function(d) { return yScale(d.close); });

    var upDataJoin = fc.util.dataJoin()
      .selector('path.up')
      .element('path')
      .attr('class', 'up');

    var downDataJoin = fc.util.dataJoin()
      .selector('path.down')
      .element('path')
      .attr('class', 'down');

    var candlestick = function(selection) {
        selection.each(function(data) {
            candlestickSvg.width(barWidth(data.map(xValueScaled)));

            var upData = data.filter(function(d) { return d.open < d.close; });
            var downData = data.filter(function(d) { return d.open >= d.close; });

export default function(discontinuityProvider, domain, data, centerDate) {
    var dataExtent = fc.util.extent()
        .fields(['date'])(data);

    var domainExtent = fc.util.extent()
        .fields([fc.util.fn.identity])(domain);

    var domainTimeDifference = discontinuityProvider.distance(domainExtent[0], domainExtent[1]);

    if (centerDate.getTime() < dataExtent[0] || centerDate.getTime() > dataExtent[1]) {
        return domainExtent;
    }

    var centeredDataDomain = [
        discontinuityProvider.offset(centerDate, -domainTimeDifference / 2),
        discontinuityProvider.offset(centerDate, domainTimeDifference / 2)
    ];

export default function(discontinuityProvider, domain, data, centerDate) {
    var dataExtent = fc.util.extent()
        .fields(['date'])(data);

    var domainExtent = fc.util.extent()
        .fields([fc.util.fn.identity])(domain);

    var domainTimeDifference = discontinuityProvider.distance(domainExtent[0], domainExtent[1]);

    if (centerDate.getTime() < dataExtent[0] || centerDate.getTime() > dataExtent[1]) {
        return domainExtent;
    }

    var centeredDataDomain = [
        discontinuityProvider.offset(centerDate, -domainTimeDifference / 2),
        discontinuityProvider.offset(centerDate, domainTimeDifference / 2)
    ];

    var timeShift = 0;
    if (centeredDataDomain[1].getTime() > dataExtent[1].getTime()) {
        timeShift = -discontinuityProvider.distance(dataExtent[1], centeredDataDomain[1]);

export default function() {
    var dispatch = d3.dispatch('optionChange');

    var buttonDataJoin = fc.util.dataJoin()
        .selector('button')
        .element('button')
        .attr({
            'class': 'dropdown-toggle',
            'type': 'button',
            'data-toggle': 'dropdown'
        });

    var caretDataJoin = fc.util.dataJoin()
        .selector('.caret')
        .element('span')
        .attr('class', 'caret');

    var listDataJoin = fc.util.dataJoin()
        .selector('ul')
        .element('ul')

export default function() {
    var dispatch = d3.dispatch('optionChange');

    var buttonDataJoin = fc.util.dataJoin()
        .selector('button')
        .element('button')
        .attr({
            'class': 'dropdown-toggle',
            'type': 'button',
            'data-toggle': 'dropdown'
        });

    var caretDataJoin = fc.util.dataJoin()
        .selector('.caret')
        .element('span')
        .attr('class', 'caret');

    var listDataJoin = fc.util.dataJoin()
        .selector('ul')
        .element('ul')
        .attr('class', 'dropdown-menu');

    var listItemsDataJoin = fc.util.dataJoin()
        .selector('li')
        .element('li')
        .key(function(d) { return d.displayString; });

    function dropdown(selection) {
        var model = selection.datum();