Dc.js and D3.js chart update

Question

I'm using dc.js to draw some charts.

In the d3 code I'm calculating dynamicly the total sum of a few columns and add them then to the pie chart which I draw with d3.js.

This is the code which calculates the total sum of the columns:

var pieChart = [];
classesJson.forEach(function(classJson){
    var memDegree = ndx.groupAll().reduceSum(function(d){
        return d[classJson.name];
    }).value();
    //console.log(memDegree);
    pieChart.push({name:classJson.name, memDegree:memDegree});
});

The drawing for the first time works fine. But when I click elements on the dc.js bar charts the d3.js pie chart didn't update. How can accomplish that the GroupAll values from the above code also update in the d3.js pie chart?

This is the total d3 code for the pie chart:

radius = Math.min(300, 234) / 2;

var color = d3.scale.ordinal()
    .range(["#98abc5", "#8a89a6", "#7b6888", "#6b486b", "#a05d56", "#d0743c", "#ff8c00"]);

var arc = d3.svg.arc()
    .outerRadius(radius - 10)
    .innerRadius(0);

var pie = d3.layout.pie()
    .sort(null)
    .value(function(d) { return d.memDegree; });

var svg = d3.select("#membership-degree-pie-chart").append("svg")
    .attr("width", 300)
    .attr("height", 234)
  .append("g")
    .attr("transform", "translate(" + 300 / 2 + "," + 234 / 2 + ")");

var pieChart = [];
classesJson.forEach(function(classJson){
    var memDegree = ndx.groupAll().reduceSum(function(d){
        return d[classJson.name];
    }).value();
    //console.log(memDegree);
    pieChart.push({name:classJson.name, memDegree:memDegree});
});

pieChart.forEach(function(d) {
    d.memDegree = +d.memDegree;
  });

  var g = svg.selectAll(".arc")
      .data(pie(pieChart))
    .enter().append("g")
      .attr("class", "arc");

  g.append("path")
      .attr("d", arc)
      .style("fill", function(d) { return color(d.data.name); });

  g.append("text")
      .attr("transform", function(d) { return "translate(" + arc.centroid(d) + ")"; })
      .attr("dy", ".35em")
      .style("text-anchor", "middle")
      .text(function(d) { return d.data.name; });

Answer 1

Without fiddle or plnkr it's difficult to tell. But I have edited your code without testing. Please check if it helps, I have created the change function to update the graph. you can call change function where you want to update the graph. Hope it helps.

      var g = svg.selectAll(".arc")
          .data(pie(pieChart))
        .enter().append("g")
          .attr("class", "arc")
        .append("path")
        .attr("d", arc)
        .style("fill", function (d) { return color(d.data.name); })
.each(function(d) { this._current = d; }); // store the initial angles;

    g.append("text")
        .attr("transform", function (d) { return "translate(" + arc.centroid(d) + ")"; })
        .attr("dy", ".35em")
        .style("text-anchor", "middle")
        .text(function (d) { return d.data.name; });

    //For updating change in data
     function change() {


        pie.value(function(d) { return d.memDegree; }); // change the value function
        g = g.data(pie); // compute the new angles
        g.transition().duration(750).attrTween("d", function (a) {
            var i = d3.interpolate(this._current, a);
            this._current = i(0);
            return function (t) {
                return arc(i(t));
            };
        }); // redraw the arcs
    }

Answer 2

You can use a listener on the dc chart to detect that is has been filtered and then call your update function for the d3 chart.

yourDCChart.on("filtered", function (chart, filter) {
    // update function for d3
    updateD3Chart();
});

Answer 3

I attached D3 draw function for my custom visualizations to dc chart, each time the chart was updated/rendered D3 chart got drawn again :

dcTable
.on("renderlet.<renderletKey>", function (d3ChartData) {
  drawD3(d3ChartData)
}