將路徑轉換添加到餅圖

我正在繪製一個餅圖d3.js。我想在添加新數據時轉換餅圖片。（我使用可重複使用的圖表API）。我首先創建一個使用進入一個圖表組，然後追加圖表弧形路徑：當新的數據進來，我需要能夠轉換的路徑將路徑轉換添加到餅圖

var arcGroup = svg.select(".pie").selectAll(".arc " + selector) 
        .data(pie(data)) 
        .enter().append("g") 
        .attr("class", "arc " + selector); 
        if (options.left) { 
         arcGroup.attr('transform', 'translate(' + options.left + ',' + options.top + ')'); 
        } else { 
         arcGroup.attr('transform', 'translate(' + options.width/2 + ',' + options.height/2 + ')'); 
        } 

//append an arc path to each group 
arcGroup.append("path") 
     .attr("d", arc) 
     //want to add the transition in here somewhere 
     .attr("class", function (d) { return 'slice-' + d.data.type; }) 
     .style("fill", function (d, i) { 
      return color(d.data.amount) 
     }); 
     //...

問題是（與也是小提琴中顯示的文本節點），但是輸入選擇是在父組上進行的。我如何添加transition()以適用於路徑？

來源

2014-04-08 Mike Rifgin

您可以使用.select()，它將數據傳播到選定的元素。然後，您可以應用基於新數據的轉換。代碼看起來像這樣：

var sel = svg.selectAll(".pie").data(pie(newData)); 

// handle enter + exit selections 

// update paths 
sel.select("path") 
    .transition() 
    .attrTween("d", arcTween);

來源

2014-04-08 11:04:57

謝謝。這似乎沒有像我預期的那樣工作。當我嘗試刪除路徑時，我得到一個錯誤「Uncaught TypeError：Object [object Array] has no method'exit」http://jsfiddle.net/EuK6H/13/我無法刪除路徑嗎？ –

輸入，更新和退出選擇在使用'.data（）'顯式綁定數據之後可用，而不是在子選擇之後。所以你必須做'sliceGroups.exit（）。select（...）。remove（）'，除非在這種情況下子選擇沒有意義。如果您不刪除整個組，則更新時會匹配數據（匹配空組並且不添加任何您希望添加的內容）。 –

啊，我明白了。退出的選擇並不是我真正需要的。我需要轉換子選項 –

將路徑轉換添加到餅圖

回答

相關問題