鱼眼畸变和码花

Posted 2023-02-25

【中文标题】鱼眼畸变和码花

【英文标题】：fisheye distortion and codeflower

【发布时间】：2015-03-03 04:26:49

【问题描述】：

我已成功为示例数据集实现了代码花视图。用来实现的代码是：

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 元素了。任何帮助表示赞赏。谢谢你。

【参考方案1】：

您可以使用 SVG 滤镜 (feDisplacement) 进行鱼眼失真，但您需要一个非常具体的置换贴图来实现它。这是我根据 Inkscape 的鱼眼失真参考图像编写的示例。请参阅其他示例，了解如何用 D3 语法表达这一点。

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

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

</filter>