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()階段爲路徑設置一些屬性。