c3/src/subchart.js

c3_chart_internal_fn.initBrush = function () {
    var $$ = this, d3 = $$.d3;
    $$.brush = d3.svg.brush().on("brush", function () { $$.redrawForBrush(); });
    $$.brush.update = function () {
        if ($$.context) { $$.context.select('.' + $$.CLASS[_brush]).call(this); }
        return this;
    };
    $$.brush.scale = function (scale) {
        return $$.config[__axis_rotated] ? this.y(scale) : this.x(scale);
    };
};
c3_chart_internal_fn.initSubchart = function () {
    var $$ = this, config = $$.config,
        context = $$.context = $$.svg.append("g").attr("transform", $$.getTranslate('context'));

    if (!config[__subchart_show]) {
        context.style('visibility', 'hidden');
    }

    // Define g for chart area
    context.append('g')
        .attr("clip-path", $$.clipPath)
        .attr('class', CLASS[_chart]);

    // Define g for bar chart area
    context.select('.' + CLASS[_chart]).append("g")
        .attr("class", CLASS[_chartBars]);

    // Define g for line chart area
    context.select('.' + CLASS[_chart]).append("g")
        .attr("class", CLASS[_chartLines]);

    // Add extent rect for Brush
    context.append("g")
        .attr("clip-path", $$.clipPath)
        .attr("class", CLASS[_brush])
        .call($$.brush)
        .selectAll("rect")
        .attr(config[__axis_rotated] ? "width" : "height", config[__axis_rotated] ? $$.width2 : $$.height2);

    // ATTENTION: This must be called AFTER chart added
    // Add Axis
    $$.axes.subx = context.append("g")
        .attr("class", CLASS[_axisX])
        .attr("transform", $$.getTranslate('subx'))
        .attr("clip-path", config[__axis_rotated] ? "" : $$.clipPathForXAxis);
};
c3_chart_internal_fn.updateTargetsForSubchart = function (targets) {
    var $$ = this, context = $$.context, config = $$.config,
        contextLineEnter, contextLineUpdate, contextBarEnter, contextBarUpdate;

    if (config[__subchart_show]) {

        contextBarUpdate = context.select('.' + CLASS[_chartBars]).selectAll('.' + CLASS[_chartBar])
            .data(targets)
            .attr('class', generateCall($$.classChartBar, $$));
        contextBarEnter = contextBarUpdate.enter().append('g')
            .style('opacity', 0)
            .attr('class', generateCall($$.classChartBar, $$));
        // Bars for each data
        contextBarEnter.append('g')
            .attr("class", generateCall($$.classBars, $$));

        //-- Line --//
        contextLineUpdate = context.select('.' + CLASS[_chartLines]).selectAll('.' + CLASS[_chartLine])
            .data(targets)
            .attr('class', generateCall($$.classChartLine, $$));
        contextLineEnter = contextLineUpdate.enter().append('g')
            .style('opacity', 0)
            .attr('class', generateCall($$.classChartLine, $$));
        // Lines for each data
        contextLineEnter.append("g")
            .attr("class", generateCall($$.classLines, $$));
        // Area
        contextLineEnter.append("g")
            .attr("class", generateCall($$.classAreas, $$));
    }
};
c3_chart_internal_fn.redrawSubchart = function (withSubchart, transitions, duration, durationForExit, areaIndices, barIndices, lineIndices) {
    var $$ = this, d3 = $$.d3, context = $$.context, config = $$.config,
        contextLine,  contextArea, contextBar, drawAreaOnSub, drawBarOnSub, drawLineOnSub;

    // subchart
    if (config[__subchart_show]) {
        // reflect main chart to extent on subchart if zoomed
        if (d3.event && d3.event.type === 'zoom') {
            $$.brush.extent($$.x.orgDomain()).update();
        }
        // update subchart elements if needed
        if (withSubchart) {

            // rotate tick text if needed
            if (!config[__axis_rotated] && config[__axis_x_tick_rotate]) {
                $$.rotateTickText($$.axes.subx, transitions.axisSubX, config[__axis_x_tick_rotate]);
            }

            // extent rect
            if (!$$.brush.empty()) {
                $$.brush.extent($$.x.orgDomain()).update();
            }
            // setup drawer - MEMO: this must be called after axis updated
            drawAreaOnSub = $$.generateDrawArea(areaIndices, true);
            drawBarOnSub = $$.generateDrawBar(barIndices, true);
            drawLineOnSub = $$.generateDrawLine(lineIndices, true);
            // bars
            contextBar = context.selectAll('.' + CLASS[_bars]).selectAll('.' + CLASS[_bar])
                .data(generateCall($$.barData, $$));
            contextBar.enter().append('path')
                .attr("class", generateCall($$.classBar, $$))
                .style("stroke", 'none')
                .style("fill", $$.color);
            contextBar
                .style("opacity", generateCall($$.initialOpacity, $$))
                .transition().duration(duration)
                .attr('d', drawBarOnSub)
                .style('opacity', 1);
            contextBar.exit().transition().duration(duration)
                .style('opacity', 0)
                .remove();
            // lines
            contextLine = context.selectAll('.' + CLASS[_lines]).selectAll('.' + CLASS[_line])
                .data(generateCall($$.lineData, $$));
            contextLine.enter().append('path')
                .attr('class', generateCall($$.classLine, $$))
                .style('stroke', $$.color);
            contextLine
                .style("opacity", generateCall($$.initialOpacity, $$))
                .transition().duration(duration)
                .attr("d", drawLineOnSub)
                .style('opacity', 1);
            contextLine.exit().transition().duration(duration)
                .style('opacity', 0)
                .remove();
            // area
            contextArea = context.selectAll('.' + CLASS[_areas]).selectAll('.' + CLASS[_area])
                .data(generateCall($$.lineData, $$));
            contextArea.enter().append('path')
                .attr("class", generateCall($$.classArea, $$))
                .style("fill", $$.color)
                .style("opacity", function () { $$.orgAreaOpacity = +d3.select(this).style('opacity'); return 0; });
            contextArea
                .style("opacity", 0)
                .transition().duration(duration)
                .attr("d", drawAreaOnSub)
                .style("fill", $$.color)
                .style("opacity", $$.orgAreaOpacity);
            contextArea.exit().transition().duration(durationForExit)
                .style('opacity', 0)
                .remove();
        }
    }
};
c3_chart_internal_fn.redrawForBrush = function () {
    var $$ = this, x = $$.x;
    $$.redraw({
        withTransition: false,
        withY: false,
        withSubchart: false,
        withUpdateXDomain: true
    });
    $$.config[__subchart_onbrush].call($$.api, x.orgDomain());
};
c3_chart_internal_fn.transformContext = function (withTransition, transitions) {
    var $$ = this, subXAxis;
    if (transitions && transitions.axisSubX) {
        subXAxis = transitions.axisSubX;
    } else {
        subXAxis = $$.context.select('.' + CLASS[_axisX]);
        if (withTransition) { subXAxis = subXAxis.transition(); }
    }
    $$.context.attr("transform", $$.getTranslate('context'));
    subXAxis.attr("transform", $$.getTranslate('subx'));
};