.on function for dc.js charts showing error

问题

I am stuck at a point

dcCharts  = d3.selectAll("div.mychart") 
            .attr("class", "yourchart") 
            .each(function (d, i) { 
            return d ; 
         });

I retrieve the divs and do this: `

 _.each(dcCharts, function (dcChart) {
    dcChart.on("filtered", function (chart, filter) {
        map.eachLayer(function (layer) {
        map.removeLayer(layer)
        }); 
    drawMap();
    });
    dc.renderAll();
});

I am getting this error:

Uncaught TypeError: dcChart.on is not a function
    at updateFile:229
    at Function.m.each.m.forEach (underscore-min.js:5)
    at updateFile:228
    at Object.<anonymous> (d3.v3.js:1996)
    at Object.event (d3.v3.js:504)
    at XMLHttpRequest.respond (d3.v3.js:1949)

回答1:

For future readers, this is a follow-up to Dynamic div creation for dc.js and implementing crossfiltered dashboard which provides some context.

The issue here is that the bound data for each div is the string column name, not the chart. If you want to produce an array of charts, I recommend building the array while initializing the charts. (copied from my edited answer to the previous question)

var dcCharts = new Array(cols.length);
divs.each(function(col, i) {
  var dimension = cf.dimension(function(d) { return d[col]; });
  var group = dimension.group(); // or however you want to bin them
  var bar = dc.barChart(this) // pass div element as parent/root instead of using selector
      .dimension(dimension)
      .group(group)
      // ...
  dcCharts[i] = bar;
});

Now your _.each(dcCharts, ... should work.

来源：https://stackoverflow.com/questions/49707557/on-function-for-dc-js-charts-showing-error

标签

dc.js