鱼眼畸变和码花答案

【问题标题】：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 元素了。任何帮助表示赞赏。谢谢你。

【问题讨论】：

标签： svg d3.js visualization fisheye

【解决方案1】：

您可以使用 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>

【讨论】：