2015-12-08 220 views
1

我一直對一些情節,作爲他們的基礎這個美麗的程式碼中使用的:non-hierarchical radial outlay with edge bundling,加入懸停旁白等裝飾。然而,我注意到,當代碼片段被提供給某些json文件時,它會生成跨越svg的全部高度(或寬度)的邊緣,邊緣被添加到該邊緣。此fiddle在Chrome中複製了該問題。D3邊緣捆綁產生邊緣全長SVG

在這種小提琴,亞瑟和布蘭奇之間的邊緣跨越SVG的全長,而我希望的邊緣只是鏈接亞瑟和布蘭奇。一位朋友建議說JSON可能會因此而有所不同,但它與JSON的其餘部分保持一致。 (亞瑟 - 布蘭奇JSON在第二哈希表如下所示):

{ 
    source: 5, 
    target: 4, 
    value: 1 
}, 
{ 
    source: 5, 
    target: 6, 
    value: 5 
}, 
{ 
    source: 5, 
    target: 7, 
    value: 2 
}, 

有誰知道爲什麼這個邊緣橫跨SVG的滿量程顯示?

我想我可以破解路徑刪除落在主圓的半徑之外的邊緣部分,但我渴望瞭解是什麼導致了這種奇怪的行爲。我非常感謝他人在這個問題上提供的任何幫助!

回答

1

不得不深入鑽研這個在這裏給你解決它:)

取而代之的是直線職能

var line = d3.svg.line() 
    .interpolate("basis") 
    .x(function(d) { return d.x; }) 
    .y(function(d) { return d.y; }); 

使上Y從沒有超出直徑的條件

var line = d3.svg.line() 
    .interpolate("basis") 
    .x(function(d) {if(d.x<0 || d.x > diameter) {d.x=diameter} return d.x; }) 
    .y(function(d) {if(d.y<0 || d.y > diameter) {d.y=diameter} return d.y; }); 

工作代碼here

希望日是有幫助的!

+0

謝謝@Cyril!不幸的是,其他JSON饋送到您更改的小提琴仍然產生問題:/這裏是一個例子:http://jsfiddle.net/yo7a8t1d/10/我已經加載了多個JSON文件以相同的格式到https://s3.amazonaws的.com/duhaime-莎士比亞/福爾傑性別/ + {FILENAME} +上傳.json其中filename是指任何這些值:1H4 AYL H5 LR每TN WT 1H6腺苷H8 MM R2 TNK WIV 2H4螞蟻火腿MND R3添2H6心病JC MV羅山雀3H6 CYM約翰福音的Mac SHR TMP AWW ERR LLL超視距TGV TRO – duhaime

+0

更新我的回答上面和小提琴這應該打釘LOL :) – Cyril

+0

爲你做修復工作? – Cyril