魚眼畸變和codeflower

我已經成功地爲示例數據集實現了一個codeflower視圖。用於實現該代碼是：魚眼畸變和codeflower

var currentCodeFlower; 
var createCodeFlower = function(json) { 
    document.getElementById('jsonData').value = JSON.stringify(json); 
    if(currentCodeFlower) currentCodeFlower.cleanup(); 
    var total = countElements(json); 
    //console.log(total); 
    w = parseInt(Math.sqrt(total) * 50, 10); 
    h = parseInt(Math.sqrt(total) * 50, 10); 
    currentCodeFlower = new CodeFlower("#visualization",w,h).update(json); 
}; 
d3.json('data.json', createCodeFlower);

我現在想魚眼失真添加到這個可視化的，我不知道如何去這個問題。我查看了魚眼的documentation，但是因爲我使用了codeflower.js，所以我不知道如何訪問svg元素。任何幫助表示讚賞。謝謝。

來源

2015-03-03 rnaikzz

您可以使用SVG濾鏡（feDisplacement）進行魚眼變形，但您需要一個非常特定的位移貼圖來實現它。這是我根據Inkscape的魚眼畸變參考圖像編寫的一個例子。請參閱其他示例以瞭解如何在D3語法中表達它。

<filter id="trilight" x="-50%" y="-50%" width="200%" height="200%"> 
    <feImage xlink:href="http://tavmjong.free.fr/INKSCAPE/MANUAL/images/FILTERS/bubble.png" result="lightMap" x="30" y="0" width="600" height="600"/> 

<feDisplacementMap in2="lightMap" in="SourceGraphic" xChannelSelector="R" yChannelSelector="G" scale="10"> 
</feDisplacementMap> 

</filter>

來源

2015-03-03 07:13:37

魚眼畸變和codeflower

回答

相關問題