鱼眼畸变与码花

Question

我已经成功地为一个示例数据集实现了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);

我现在希望添加鱼眼扭曲到这个可视化，不知道如何去做。我已经研究了鱼眼的留档，但当我使用codeflower.js我不确定如何访问svg元素了。任何帮助都很感激。谢谢你。

Answer 1

你可以使用一个SVG滤波器（feDisplace）做一个鱼眼失真，但是你需要一个非常具体的位移图来实现它。这是我基于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>