D3 sunburst圖：設置arc.cornerRadius（）導致arcTween無效路徑

Question

我嘗試創建一個動態sunburst圖表，該圖表縮放選定的弧線並隱藏其他弧線。這很好，只要我避免使用arc.cornerRadius（）的值大於0.

我在（attrTween）arcTween函數中記錄了生成的弧，輸出對我來說似乎是正確的，但是跟隨svg路徑不同，其中第二個在d3.min.js中導致錯誤：5。

正確的路徑：

M0,58.528989440000004A58.528989440000004,58.528989440000004 0 1,1 0,-58.528989440000004A58.528989440000004,58.528989440000004 0 1,1 0,58.528989440000004M0,55A55,55 0 1,0 0,-55A55,55 0 1,0 0,55Z 

錯誤路徑：

M0,55.73917966222222A55.73917966222222,55.73917966222222 0 1,1 0,-55.73917966222222A55.73917966222222,55.73917966222222 0 1,1 0,55.73917966222222M0,55A55,55 0 1,0 0,-55A55,55 0 1,0 0,55Z 

這是我的設置半徑：

var graphMaxRadius = 83; 
    var innerBtnRadius = 55; 
    var arc = d3.svg.arc() 
       .startAngle(function(d) { return Math.max(0, Math.min(2 * Math.PI, xScale(d.x))); }) 
       .endAngle(function(d) { return Math.max(0, Math.min(2 * Math.PI, xScale(d.x + d.dx))); }) 
       .innerRadius(function(d) { return Math.max(innerBtnRadius, yScale(d.y)); }) 
       .outerRadius(function(d) { return Math.max(0, Math.min(yScale(d.y + d.dy), graphMaxRadius)); }) 
       .cornerRadius(function(d) { return 10;}); 

我的第一個猜測是，該cornerRadius衝突隱藏弧和無效的svg發生，所以我嘗試了各種尺寸。但是，一切都> 0導致誤差的輸出：

M0,55A55,55 0 1,1 0,-55A55,55 0 1,1 0,55M0,50.006635519999996A50.006635519999996,50.006635519999996 0 1,0 0,-50.006635519999996A50.006635519999996,50.006635519999996 0 1,0 0,50.006635519999996Z 
    d3.min.js:5 Error: Invalid value for <path> attribute d="MNaN,NaNANaN,NaN 0 1,1 NaN,NaNLNaN,NaNANaN,NaN 0 0,1 NaN,NaNZ" 
d3.min.js:5 (anonymous function) 
d3.min.js:3 l 
d3.min.js:1 Lt 
d3.min.js:1 qt 

這是我arcTween功能（在對應關係編輯以mbostok上github issue）：

return function arcTween(d) { 
     var xd = d3.interpolate(xScale.domain(), [d.x, d.x + d.dx]); 
     var yd = d3.interpolate(yScale.domain(), [d.y, d.y + d.dy]); 

     var selectionRadius = innerBtnRadius - 5; 
     //radius -5 reduces width of inner circle and selection rim 
     var yr = d3.interpolate(yScale.range(), [d.y ? selectionRadius : innerBtnRadius, radius-5]); 

     return function(d, i) { 
      return i 
       ? function(t) { return arc(d); } 
       : function(t) { xScale.domain(xd(t)); yScale.domain(yd(t)).range(yr(t)); return arc(d); }; 
     }; 
    } 

任何想法請，有什麼可接下來我檢查？

p.s. sry，沒有jsfiddle，因爲他們目前沒有安裝d3 v3.5 （我缺少數據導入）。我的代碼在這裏ressembles的例子：zoomable sunburst

這是在發生錯誤的d3.js lib中的斷點的截圖，但我仍然不知道：

Answer 1

記住， cornerRadius是D3分區佈局的一個相對較新的特性，所以可能還存在一些與之相關的bug。

但是，我的印象是，你的問題不存在。

根據你鏈接的例子，我創建了一個小的codepen。

它與示例相同，只是它使用小型數據集，並將數據保存在腳本本身中，而不是JSON文件中。

此外，我整合了cornerRadius，檢查各種值 - 並且一切都像魅力一樣，如下圖所示。

我無法集成您的補間功能，因爲其餘代碼中缺少一些比特和水滴。

所以，看起來你需要檢查並重寫你的代碼，特別是與arcTween（）相關的任何東西。

屏幕截圖示出了在我的例子有效執行：

cornerRadius爲5：

cornerRadius爲20：

cornerRadius爲100：