How to use the dc.renderAll function in dc

(d: IYelpData) => d.name,
            (d: IYelpData) => d.city,
            (d: IYelpData) => d.stars,
            (d: IYelpData) => d.review_count,
            (d: IYelpData) =&gt; '<a href="\&quot;http://maps.google.com/maps?z=12&amp;t=m&amp;q=loc:'">Map</a>"
        ])
        .sortBy((d: IYelpData) =&gt; d.stars)
        // (optional) sort order, :default ascending
        .order(d3.ascending);
    /********************************************************
     *                           *
     *   Step6:  Render the Charts             *
     *                           *
     ********************************************************/

    dc.renderAll();
});

var toDateTime = momentHelper.toUserTimeZone(filter[1]);

                SearchStore.changeTimeRange('absolute', {
                    from: fromDateTime.format(momentHelper.DATE_FORMAT_TZ),
                    to: toDateTime.format(momentHelper.DATE_FORMAT_TZ)
                });
            } else {
                this.syncRangeWithQuery();
            }
        };

        this.refs.sourceDataTable.renderDataTable(this.messageCountDimension, this.nameMessageGroup, onDataTableFiltered);
        this.refs.sourcePieChart.renderPieChart(this.nameDimension, this.nameMessageGroup, onPieChartFiltered);
        this.refs.sourceLineChart.renderLineChart(this.valueDimension, this.valueGroup, onLineChartFiltered);
        this.applyRangeParameter();
        dc.renderAll();
        $(window).on('resize', this._resizeCallback);
        $(window).on('hashchange', this._applyRangeFromHash);
        // register them live as we do not know if those buttons are currently in the DOM
        $(document).on("click", ".sidebar-hide", this._updateWidth);
        $(document).on("click", ".sidebar-show", this._updateWidth);
        UniversalSearch.init();
    },
    componentWillUnmount() {

//     // Use `d.volume`
        // ])


        danmu_Count /* dc.dataCount('.dc-data-count', 'chartGroup'); */
            .dimension(ndx)
            .group(all)
            .html({
                some: '<strong>%total-count</strong>条弹幕中的<strong>%filter-count</strong>条弹幕被选中',
                all: '当前视频所有的弹幕(共%total-count条)被选择，可以进行筛选'
            });
        this.setState({
            all_data: datas,
            selected_data: datas
        })
        dc.renderAll();
        console.log("render done!")
    }

// All of this is necessary because after setting a brush programatically,
    // it doesn't re-render them. We have to manually re-call the brush
    // to render. See: https://groups.google.com/forum/#!topic/d3-js/vNaR-vJ9hMg
    // There's more repetitive code here than I like, but we'll have to
    // figure out how to refactor this later.
    dc.renderAll()
    if (this.props.dayFilter) {
      this.dailyChart.brush().extent(this.props.dayFilter.map(i => i + DAILY_X_SHIFT)) // update brush
      this.dailyDimension.filter(this.props.dayFilter.map(i => i + DAILY_X_SHIFT)) // apply filter
    }
    if (this.props.hourFilter) {
      this.hourlyChart.brush().extent(this.props.hourFilter.map(i => i + HOURLY_X_SHIFT)) // update brush
      this.hourlyDimension.filter(this.props.hourFilter.map(i => i + HOURLY_X_SHIFT)) // apply filter
    }

    dc.renderAll()
  }

responseTimeDistribution
      .height(215)
      .transitionDuration(300)
      .dimension(responseTimeDimension)
      .group(responseTimeGroup)
      .centerBar(true)
      .xUnits(dc.units.fp.precision(binwidth))
      .margins({ top: 5, right: 20, bottom: 25, left: 45 })
      .ordinalColors(['#2fa4e7'])
      .brushOn(true)
      .x(xScaleForBar)
      .renderHorizontalGridLines(true)
      .xAxis()
      .ticks(10);

    dc.renderAll(); // Render all charts

    // Get chart data from dc registry
    const chartData = timeStampDimension.top(Infinity);

    // Iterate throuh each chart in a registry & set listeners for filtering
    _.forEach(dc.chartRegistry.list(), (chart) => {
      chart.on('filtered', () => {
        const filteredChartData = timeStampDimension.top(Infinity);
        instance.updateDataTable(filteredChartData);
        instance.updateLineChart(requestsOverTime, overviewChart, timeScaleForLineChart);
        instance.updateStatisticsData(filteredChartData);
      });
    });

    instance.updateDataTable(chartData);
    instance.updateStatisticsData(chartData);

d =&gt; `<a href="${d.url}">${d.title}</a>`,
          d =&gt; d.media_inlink_count,
          d =&gt; d.outlink_count,
          d =&gt; d.facebook_share_count,
        ])
        .sortBy(d =&gt; d.media_inlink_count) // TODO: make this selectable
        .order(d3.descending);
      this.setState({
        charts: {
          languageChart,
          facebookShareChart,
          inlinkChart,
          storiesOverTimeChart,
        },
      });
      dc.renderAll();
    });
  }

// All of this is necessary because after setting a brush programatically,
    // it doesn't re-render them. We have to manually re-call the brush
    // to render. See: https://groups.google.com/forum/#!topic/d3-js/vNaR-vJ9hMg
    // There's more repetitive code here than I like, but we'll have to
    // figure out how to refactor this later.
    dc.renderAll()
    if (this.props.dayFilter) {
      this.dailyChart.brush().extent(this.props.dayFilter.map(i => i + DAILY_X_SHIFT)) // update brush
      this.dailyDimension.filter(this.props.dayFilter.map(i => i + DAILY_X_SHIFT)) // apply filter
    }
    if (this.props.hourFilter) {
      this.hourlyChart.brush().extent(this.props.hourFilter.map(i => i + HOURLY_X_SHIFT)) // update brush
      this.hourlyDimension.filter(this.props.hourFilter.map(i => i + HOURLY_X_SHIFT)) // apply filter
    }

    dc.renderAll()
  }

.centerBar(true)
        .gap(2)
        .x(d3.scale.linear().domain([0, 1]))
        .alwaysUseRounding(true)
        .xUnits(function () {
            return up_time_cut;
        })
        .xAxis().tickFormat(function (v) {
            console.log(v);
            let num = new Number((v * (max_smt - min_smt) + min_smt) * 1000);
            let m = new Date(num);
            let dateString = m.getUTCFullYear() + "/" + (m.getUTCMonth() + 1) + "/" + m.getUTCDate() + " " + m.getUTCHours() + ":" + m.getUTCMinutes() + ":" + m.getUTCSeconds();
            return dateString;
        });

    dc.renderAll();
    console.log("dc render");
    
    $("#danmu-up-chart svg").attr("height", 250);
};

desc = descCache[d.id];
                }
                var date = d3.time.format("%Y-%m-%d")(d.dd);

                var link = `<a href="${href}" id="transaction-link">${desc}</a>`
                return date + " " + link;
            })
            .sortBy(function (d) {
                return -d.id;
            })
            .size(15);

        //TODO transaction value chart (count vs value)
        //TODO total value transacted chart (count vs value)

        dc.renderAll();
    });
});

handleReset(){
        dc.filterAll(); 
        dc.renderAll();
        const all_data = this.state.all_data;
        this.setState({
            selected_data: all_data
        })
    }