D3 Y軸上的Sunburst Breadcrumb

我是D3的新手，我試圖修改Kryrodden的序列sunburst，並在Y（垂直）軸上顯示麪包屑。D3 Y軸上的Sunburst Breadcrumb

下面是我要做一個例子： enter image description here

下面是我在其中一個小提琴：http://jsfiddle.net/niceux/tth0goc7/

基本上，我已經嘗試過尋找其中SVG組是是追加，並且與y軸的代碼用小提琴代碼的199行交換x軸代碼：

entering.append("svg:text") 
     .attr("x", b.w/2) 
     .attr("y", (b.h + b.t)/2) 
     .attr("dy", "0.35em") 
     .attr("text-anchor", "middle") 
     .text(function(d) { return d.name; });

來源

2014-09-03 NiceUX

我試着修改現有的示例代碼，其中breadcrumb得到初始化並交換出X軸代碼和Y軸代碼，但似乎無法找到任何可以翻轉軸的地方即使是正確方向的暗示也會非常有幫助。謝謝！ – NiceUX 2014-09-03 20:10:55

這裏與基本提琴，讓你開始：http://jsfiddle.net/henbox/8m2gn7vw/2/

我做了一些改動。首先，這是代碼段確定每個麪包屑多邊形是如何定位：

// Set position for entering and updating nodes. 
g.attr("transform", function(d, i) { 
    return "translate(" + i * (b.w + b.s) + ", 0)"; 
});

切換translate定位麪包屑節點垂直於0固定x軸的情況和計算y軸位置代替，以及用於高度（b.h）這樣切換麪包屑多邊形寬度（b.w）：

return "translate(0, " + i * (b.h + b.s) + ")";

接着我需要修改<div id="sequence"></div> html元素以適應麪包屑路徑的新形狀。將sequence div一起移除是最容易的，並根據id=leftsidebar創建一個新的div，基於右側用於圖例的現有<div id="sidebar">元素。我修改了CSS以給出新div的大小和位置。

最後，我將percentageString移動到最後一個麪包屑節點下的正確位置。爲此，我提出從一個交換機到x和y屬性：

d3.select("#trail").select("#endlabel") 
    .attr("x", (nodeArray.length + 0.5) * (b.w + b.s)) 
    .attr("y", b.h/2)

到

d3.select("#trail").select("#endlabel") 
    .attr("x", b.w/2) 
    .attr("y", (nodeArray.length + 0.5) * (b.h + b.s))

進一步改進，你可能要重新塑造麪包屑多邊形（它們指向正確的看起來很奇怪的時刻

來源

2014-09-04 14:14:47

D3 Y軸上的Sunburst Breadcrumb

回答

相關問題