D3 - Sunburst图中的转换弧

Question

我有D3制作的sunburst图表。每个'花瓣'代表数据的一个子集。当用户点击“花瓣”之一，我想它过渡，扇出，只显示该子集（见图片）：

我遇到麻烦代码正常过渡。

点击后，所有'花瓣'（除了选定的花瓣）应该消失，剩余的路径应该沿着圆圈生成动画（使用attrTween，arcTween和interpolate？）。将改变的主要值是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);的东西，在不同的数据之间进行补间。

在此图表中，this._current和a是相同的，angleSize（var angleSize = (2 * Math.PI)/theData.length;），startAngle和endAngle是唯一发生更改的事物。

Answer 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变量访问）。这样路径可以将这些数据用于自己的目的。在这种情况下，company和study_name属性。

现在为了调整过渡并使其更加准确，起始属性可以改变。您可以尝试在.enter()阶段为路径设置一些属性。