如何在可縮放的森伯斯特圖表中使用CSV數據？

Question

我有sunburst可視化基本上具有相同的代碼結構的this CodePen（來自this question on stackoverflow。我試圖也包括不僅可以放大，但也可以放大在sunburst內（當點擊到sunburst的中間）我已經嘗試了以下步驟，但這些都沒有工作到目前爲止，我迷失在如何做到這一點（道歉，如果這是一件非常容易的事情要做，我對JS很新穎。）

在開頭包括：

var x = d3.scale.linear() 
    .range([0, 2 * Math.PI]); 

var y = d3.scale.linear() 
    .range([0, radius]); 

更改弧參數：

var arc = d3.svg.arc() 
.startAngle(function(d) { return Math.max(0, Math.min(2 * Math.PI, x(d.x))); }) 
.endAngle(function(d) { return Math.max(0, Math.min(2 * Math.PI, x(d.x + d.dx))); }) 
.innerRadius(function(d) { return Math.max(0, y(d.y)); }) 
.outerRadius(function(d) { return Math.max(0, y(d.y + d.dy)); }); 

改變了arcTween()功能：

function arcTween(d){ 
var xd = d3.interpolate(x.domain(), [d.x, d.x + d.dx]), 
    yd = d3.interpolate(y.domain(), [d.y, 1]), 
    yr = d3.interpolate(y.range(), [d.y ? 20 : 0, radius]); 
return function(d, i) { 
return i 
    ? function(t) { return arc(d); } 
    : function(t) { x.domain(xd(t)); y.domain(yd(t)).range(yr(t)); return arc(d); }; 
}; 
}; 

但是，這是行不通的。

任何人都可以幫我嗎？

Answer 1

不知道你是否仍然需要它，但我很確定this pen回答你的問題。

的代碼，你貼：

... 

var arc = d3.svg.arc() 
    .startAngle(function(d) { return Math.max(0, Math.min(2 * Math.PI, x(d.x))); }) 
    .endAngle(function(d) { return Math.max(0, Math.min(2 * Math.PI, x(d.x + d.dx))); }) 
    .innerRadius(function(d) { return Math.max(0, y(d.y)); }) 
    .outerRadius(function(d) { return Math.max(0, y(d.y + d.dy)); }); 

... 

一切看起來正確的，因爲我在評論說，這似乎符合邁克·博斯托克的Sunburst Example。所以，沒有看到你的代碼的其餘部分，我不能確切地告訴你問題是什麼。

The pen我創建，上面提到，包括縮放（在兩個方向），麪包屑和弧衰落。

我的樣式不像您使用的example那麼多，但這不應該太難以添加（不知道您需要什麼）。另外，我認爲保持簡單可能會使它更容易理解。希望這會有所幫助，如果您需要澄清某些事情或者如果您在查看筆時遇到問題，請告知我們。

UPDATE

This pen，這是one I built和其他example的組合，開始與CSV數據，而不是解析的JSON。

另一個示例將'size'用於值鍵而不是'value'。我在buildHierarchy功能改變了這一點，並增加了一個獨特的ID，以確定懸停行爲：

... 
childNode = {"name": nodeName, "value": size, id: create_id() }; 
... 

的create_id功能只是我found作出唯一的ID爲每個項目樹：

function create_id() { 
    return '_' + Math.random().toString(36).substr(2, 9); 
};