D3 - Переходные дуги в диаграмме Sunburst

У меня есть диаграмма солнечных лучей, сделанная в D3. Каждый "лепесток" представляет собой подмножество данных. Когда пользователь нажимает на один из "лепестков", я бы хотел, чтобы он переходил, размахивая, чтобы показывать только это подмножество (см. Изображение):

введите описание изображения здесь

У меня возникли проблемы с правильной переходом кода.

При щелчке все "лепестки" (кроме выбранного) должны исчезнуть, а оставшиеся пути должны анимироваться по кругу (используя attrTween, arcTween и интерполировать?). Первичное значение, которое будет меняться, это angleSize (var angleSize = (2 * Math.PI) / theData.length;).

Я пробовал использовать this, this, this и this в качестве ссылки без особого успеха. Каков наилучший способ обработки анимации?

Спасибо за ваше время!

- > См. Plunker Here. < -

Код ниже:

  var colors = {
    'Rank1' : '#3FA548',
    'Rank2' : '#00B09E',
    'Rank3' : '#8971B3',
    'Rank4' : '#DFC423',
    'Rank5' : '#E74341'
  };

  var $container = $('.chart'),
      m = 40,
      width = $container.width() - m,
      height = $container.height() - m,
      r = Math.min(width, height) / 2;

  var study = null;
  var arc = d3.svg.arc();

  d3.csv('text.csv', ready);

  function ready(err, data) {
    if (err) console.warn('Error', err);

    var svg = d3.select('.chart')
                .append('svg')
                .attr({
                  'width' : (r + m) * 2,
                  'height' : (r + m) * 2,
                  'class' : 'container'
                })
                .append('g')
                .attr('transform', 'translate(' + (width / 4) + ', ' + (height / 2) + ' )'); 

    var slice = svg.selectAll('.slice');

    function updateChart(study) {
      if (study) {
        var theData = data.filter(function(d) { 
              return d.study_name === study; 
            });
      } else {
        var theData = data;
      }

      slice = slice.data(theData);

      slice.enter()
           .append('g')
           .attr('class', 'slice'); 

      var angleSize = (2 * Math.PI) / theData.length; 

      var startRadArr = [],
          endRadArr = [];

      for ( var i = 0; i < data.length; i++ ) {
        var startRadius = (width / 20),
            endRadius = startRadius;

        for ( var x = 0; x < 4; x++ ) {
          startRadArr.push(startRadius);

          if ( x == 0 ) {
            endRadius += Number(data[i].group1_score) * (width / 500);
          } else if ( x == 1 ) {
            endRadius += Number(data[i].group2_score) * (width / 500);
          } else if ( x == 2 ) {
            endRadius += Number(data[i].group3_score) * (width / 500);
          } else {
            endRadius += Number(data[i].group4_score) * (width / 500);
          }

          endRadArr.push(endRadius);
          startRadius = endRadius + 0.3;
        }
      }

      var startRadGroup = [],
          endRadGroup = [];

      for (i = 0; i < startRadArr.length; i += 4) { 
        startRadGroup.push(startRadArr.slice(i, i + 4)); 
      }

      for (i = 0; i < endRadArr.length; i += 4) { 
        endRadGroup.push(endRadArr.slice(i, i + 4)); 
      }

      slice.selectAll('path')
           .remove();

      for ( var x = 0; x < 4; x++ ) {
        slice.append('path')
             .attr({
               'class' : function(d, i) {
                 if ( x == 0 ) {
                   return d.group1_class;
                 } else if ( x == 1 ) {
                   return d.group2_class;
                 } else if ( x == 2 ) {
                   return d.group3_class;
                 } else {
                   return d.group4_class;
                 }
               },
               'company' : function(d, i) { 
                 return d.brand_name; 
               },
               'cat' : function(d, i) {
                  if ( x == 0 ) {
                   return 'Group1';
                 } else if ( x == 1 ) {
                   return 'Group2';
                 } else if ( x == 2 ) {
                   return 'Group3';
                 } else {
                   return 'Group4';
                 }
               },
               'study' : function(d, i) { 
                 return d.study_name; 
               },
               'companyid' : function(d, i) { 
                 return d.brand_id; 
               },
               'startradius' : function(d, i) {
                 return startRadGroup[i][x];
               },
               'endradius' : function(d, i) {
                 return endRadGroup[i][x];
               },
               'startangle' : function(d, i) {
                 return angleSize * i;
               },
               'endangle' : function(d, i) {
                 return angleSize * (i + 1);
               }
             })
             .on('click', selectStudy);
      }

      slice.exit()
           .remove();

      slice.selectAll('path')
           .attr({
             'd' : function(d) {
                return arc({
                  innerRadius : +d3.select(this)[0][0].attributes.startradius.nodeValue,
                  outerRadius : +d3.select(this)[0][0].attributes.endradius.nodeValue,
                  startAngle : +d3.select(this)[0][0].attributes.startangle.nodeValue,
                  endAngle : +d3.select(this)[0][0].attributes.endangle.nodeValue
                })
              }
           });
    }

    function selectStudy(d) {
      study = $(this).attr('study');
      updateChart(study);
    } 

    updateChart();
  }

ИЗМЕНИТЬ
Обновлен код (на основе this), чтобы включить правильно действующий шаблон ввода, обновления и выхода. Тем не менее, все еще не уверены в переходе. Большинство примеров, с которыми я связан, используют нечто похожее на d3.interpolate(this._current, a);, tweening между разными данными.

В этой диаграмме this._current и a одинаковы, изменяются угловые значения (var angleSize = (2 * Math.PI) / theData.length;), startAngle и endAngle.

Ответ 1

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

Взгляните на этот Plunker: https://plnkr.co/edit/a7cxRplzy66Pc1arM2a9?p=preview

Здесь перечислены измененные версии:

var colors = {
    Rank1: '#3FA548',
    Rank2: '#00B09E',
    Rank3: '#8971B3',
    Rank4: '#DFC423',
    Rank5: '#E74341'
};

// Configuration
var $container = $('.chart'),
    m = 40,
    width = $container.width() - m,
    height = $container.height() - m,
    r = Math.min(width, height) / 2;

var study = null;

var arc = d3.svg.arc();

// Load data
d3.csv('text.csv', ready);

// Data loaded callback
function ready(err, data) {
    if (err) console.warn('Error', err);

    var svg = d3.select('.chart')
        .append('svg')
        .attr({
            'width': (r + m) * 2,
            'height': (r + m) * 2,
            'class': 'container'
        })
        .append('g')
        .attr('transform', 'translate(' + (width / 4) + ', ' + (height / 2) + ' )');

    var slices = svg.selectAll('.slice');

    function updateChart(study) {
        var theData = data;

        if (study) {
            theData = data.filter(function (d) {
                return d.study_name === study;
            });
        }

        var angleSize = (2 * Math.PI) / theData.length;

        theData.forEach(function (item, i) {
            var startRadius = (width / 20),
                endRadius = startRadius,
                groupName;

            item.paths = [];

            for (var g = 0; g < 4; g++) {
                item.paths[g] = {};

                item.paths[g].startRadius = startRadius;

                groupName = 'group' + (g + 1) + '_score';

                endRadius += Number(item[groupName]) * (width / 500);

                item.paths[g].endRadius = endRadius;

                startRadius = endRadius + 0.3;
            }
        });

        // Set the data
        slices = slices.data(theData);

        // Enter
        slices.enter()
            .append('g')
            .attr('class', 'slice');

        // Exit
        slices.exit()
            .remove();

        // Update
        slices
            .transition()
            .duration(750)
            .each(function (dSlice, iSlice) {
                var slice = d3.select(this);

                var paths = slice.selectAll('path');

                // Set data
                paths = paths.data(dSlice.paths);

                // Exit
                paths.exit()
                    .remove();

                // Enter
                paths.enter()
                    .append('path')
                    .attr('class', 'path');

                // Update
                paths
                    .transition()
                    .attr({
                        'class': function (d, i) {
                            return dSlice['group' + (i + 1) + '_class'];
                        },
                        'company': dSlice.brand_name,
                        'cat': function (d, i) {
                            return 'Group' + (i + 1);
                        },
                        'study': function (d, i) {
                            return dSlice.study_name;
                        },
                        'companyid': function (d, i) {
                            return dSlice.brand_id;
                        },
                        'startradius': function (d, i) {
                            return d.startRadius;
                        },
                        'endradius': function (d, i) {
                            return d.endRadius;
                        },
                        'startangle': function (d, i) {
                            return angleSize * iSlice;
                        },
                        'endangle': function (d, i) {
                            return angleSize * (iSlice + 1);
                        },
                        'd': function (d) {
                            return arc({
                                innerRadius: +d.startRadius, 
                                outerRadius: +d.endRadius, 
                                startAngle: +angleSize * iSlice, 
                                endAngle: +angleSize * (iSlice + 1) 
                            })
                        }
                    })
                    .duration(750);

                paths.on('click', selectStudy);
            });

        function selectStudy(d, i) {
            study = $(this).attr('study');

            updateChart(study);
        }
    }

    updateChart();
}

Как вы можете видеть, ключ правильно готовит данные (скажем, формат в вашем примере .tsv файл не лучший выбор, но иногда мы не можем выбирать наши источники данных...)

Затем, поместив код для генерации путей внутри вызова .each на срезах, к данным можно получить доступ из обратных вызовов function (d, i) { ... }, и каждый элемент получит соответствующие данные.

Другим трюком является использование данных срезов (доступ через функцию .each через dSlice и iSlice vars) в обратных вызовах путей. Таким образом, пути могут использовать эти данные для своих целей. В этом случае свойства company и study_name.

Теперь, чтобы настроить переход и сделать его более точным, исходные атрибуты могут измениться. Вы можете попробовать, установив некоторые атрибуты для путей в фазе .enter().