[英]D3 sunburst diagram: Setting arc.cornerRadius() causes invalid path with arcTween
我嘗試創建一個動態的旭日形圖,該圖會放大選定的弧並隱藏其他弧。 只要我避免使用值大於0的arc.cornerRadius(),這就可以很好地工作。
我在(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函數(對應於github issue上的mbostok進行編輯):
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); };
};
}
有什么想法,我接下來要檢查什么?
ps
sry,沒有jsfiddle,因為它們當前尚未安裝d3 v3.5
(我缺少數據導入)。 我的代碼在這里類似於示例: zoomable sunburst
這是d3.js庫中發生錯誤的斷點的屏幕截圖,但我仍然不知道:
請記住,cornerRadius是D3分區布局的相對較新的功能,因此可能仍存在一些與之相關的錯誤。
但是,我的印象是您的問題不存在。
根據您鏈接到的示例,我創建了一個小codepen 。
與示例相同,只是它使用縮小的數據集,並將數據保留在腳本本身中,而不是JSON文件中。
另外,我集成了cornerRadius,檢查了各種值-一切都像魅力一樣工作,如下圖所示。
我無法集成您的補間功能,因為其余的代碼缺少一些細節。
因此,您似乎需要檢查並重寫代碼 ,尤其是與arcTween()相關的任何代碼 。
屏幕截圖說明了我的示例中的有效執行:
cornerRadius
為5:
cornerRadius
為20:
cornerRadius
為100:
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.