c3: Regions replace does not work in regions API

The regions API has a method for replacing regions:

chart.regions([
  {axis: 'x', start: 5, class: 'regionX'},
  {axis: 'y', end: 50, class: 'regionY'}
]);

In practice, this only seems to work for initializing a region (cf. regions.add()), but not updating a region. E.g. in this fiddle, the first setTimeOut function will set a region, the second one does nothing.

About this issue

Original URL
State: closed
Created 9 years ago
Comments: 15 (6 by maintainers)

Commits related to this issue

Crude implementation of region on click - Regions API is broken (https://github.com/masayuki0812/c3/issues/1255) - Only works on click on point — committed to Datafable/epu-index by peterdesmet 9 years ago
Fix regions api - #1255 — committed to c3js/c3 by masayuki0812 8 years ago

Most upvoted comments

You can push the g parent elements data down to the rect element by doing .select rather than .selectAll (it’s a little-known d3 effect that often causes errors rather than solves them)

Since there’s only 1 rect per group element there’s no problem with not using .selectAll

        regions = $$.mainRegion.selectAll('rect').each(function () {
            // data is binded to g and it's not transferred to rect (child node) automatically,
            // then data of each rect has to be updated manually.
            // TODO: there should be more efficient way to solve this?
            var parentData = $$.d3.select(this.parentNode).datum();
            $$.d3.select(this).datum(parentData);
        }),

becomes regions = $$.mainRegion.select('rect'),

martingraham on Mar 21, 2017