如何在DC.js中将函数应用于数组

如何解决如何在DC.js中将函数应用于数组

我有两个图表，第一个是折线图，用户可以在其中进行刷刷。

基于选择，条形图（仅一个条形图）将由于其特定功能而更新其值。我想以有效的方式将此特定功能应用于新数组。

我首先关注complex reduce example。我的逻辑有问题，因为函数std得到了 全部数据集而不是数组。似乎将函数放在valueAccessor中不是正确的事情。

这是我的代码：

/**********************************
* Step0: javascript functions *
**********************************/
 // instead of calculating the desired metric on every change,which is slow,we'll just maintain
// these arrays of rows and calculate the metrics when needed in the accessor
function groupArrayAdd(keyfn) {
   var bisect = d3.bisector(keyfn);
   return function(elements,item) {
       var pos = bisect.right(elements,keyfn(item));
       elements.splice(pos,item);
       return elements;
   };
}

function groupArrayRemove(keyfn) {
    var bisect = d3.bisector(keyfn);
    return function(elements,item) {
        var pos = bisect.left(elements,keyfn(item));
        if(keyfn(elements[pos])===keyfn(item))
            elements.splice(pos,1);
        return elements;
    };
}

function groupArrayInit() {
    return [];
}

/**********************************
* Step1: Load data from json file *
**********************************/
d3.json("{% url "block__time_series" portfolio value_date %}").then(function(data){

const dateFormatSpecifier = "%Y-%m-%d";
    const dateFormat = d3.timeFormat(dateFormatSpecifier);
    const dateFormatParser = d3.timeParse(dateFormatSpecifier);
    const numberFormat = d3.format('.2f');


    data.forEach(function(d) {
        d.dd = dateFormatParser(d.date);
        d.month = d3.timeMonth(d.dd); // pre-calculate month for better performance
        d.returns = +d.returns;
        d.value = +d.value;
          });

 /******************************************************
 * Step2: Create the dc.js chart objects & ling to div *
 ******************************************************/
const myBarChart = new dc.BarChart('#my_bar_chart');
const myLineChart = dc.compositeChart('#my_line_chart');

 const palette_color_block4 = ["#6c5373","#8badd9","#b6d6f2","#45788c","#6E87F2","#996A4E","#BF7761","#735360","#D994B0","#6C5373","#7F805E","#A6A27A","#48BDCC","#FFC956","#f2f2f2"]
/************************************************
* Step3:    Run the data through crossfilter    *
************************************************/
var facts = crossfilter(data),// Gets our 'facts' into crossfilter
        returns = function (d) {return +d.returns}

/*Here my function that I want to use */
function std(kv) {
      return d3.deviation(kv.value,returns);
    }

/******************************************************
* Step4: Create the Dimensions                        *
******************************************************/
const dateDimension = facts.dimension(d => d.dd);
 var returnsDimension = facts.dimension(returns);

var volGroup = dateDimension.group().reduce(groupArrayAdd(returns),groupArrayRemove(returns),groupArrayInit);
var valueGroup = dateDimension.group().reduceSum(function (d) {return d.value; });
const moveMonths = facts.dimension(d => d.month);
const monthlyMoveGroup = moveMonths.group().reduceSum(d => d.value);

/***************************************
*   Step5: Create the Visualisations   *
***************************************/

 myBarChart /* dc.BarChart('#my_bar_chart','chartGroup')*/
        .width(400)
        .height(200)
        .x(d3.scaleBand())
        .xUnits(dc.units.ordinal)
        .colorAccessor(d => d.key)
        .ordinalColors(palette_color_block4)
        .margins({left: 80,top: 30,right: 10,bottom: 20})
        .elasticY(false)
        .brushOn(false)
        .controlsUseVisibility(false)
        .valueAccessor(std)
        .dimension(returnsDimension)
        .group(volGroup);

    mylineChart /*dc.compositeChart('#my_line_chart','chartGroup')*/
        .width(800)
        .height(200)
        .transitionDuration(1000)
        .margins({top: 20,bottom: 10,left: 10})
        .dimension(moveMonths)
        .mouseZoomable(true)
        .round(d3.timeMonth.round)
        .xUnits(d3.timeMonths)
        .renderHorizontalGridLines(true)
        .legend(new dc.Legend().x(800).y(10).itemHeight(13).gap(5))
        .brushOn(true)
        .title( function(d) { return dateFormat(d.key) + ': ' + numberFormat(d.value);
            })
        .valueAccessor(function (d) { return d.value})
         .compose([
            dc.lineChart(mylineChart).group(valueGroup,data[0].name)
        ]);

    /****************************
    * Step6: Render the Charts  *
    ****************************/
    dc.renderAll();

});