Обновление диаграммы Dc.js и D3.js

Question

Я использую dc.js, чтобы нарисовать некоторые диаграммы.

В коде d3 я динамически вычисляю общую сумму нескольких столбцов и затем добавляю их к круговой диаграмме, которую я рисую с помощью d3.js.

Это код, который вычисляет общую сумму столбцов:

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});
});

Рисунок в первый раз работает отлично. Но когда я щелкаю элементы на гистограммах dc.js, круговая диаграмма d3.js не обновляется. Как сделать так, чтобы значения GroupAll из приведенного выше кода также обновлялись в круговой диаграмме d3.js?

Это общий код d3 для круговой диаграммы:

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

Вы можете использовать прослушиватель на диаграмме постоянного тока, чтобы обнаружить, что он был отфильтрован, а затем вызвать функцию обновления для диаграммы d3.

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

Answer 2

Без скрипки или плнкр сложно сказать. Но я отредактировал ваш код без тестирования. Пожалуйста, проверьте, если это помогает, я создал функцию изменения, чтобы обновить график. Вы можете вызвать функцию изменения, где вы хотите обновить график. Надеюсь, поможет.

      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 3

Я прикрепил функцию рисования D3 для своих пользовательских визуализаций к диаграмме постоянного тока, каждый раз, когда диаграмма обновлялась / отображалась, диаграмма D3 снова рисовалась:

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