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);

我现在希望为此可视化添加鱼眼扭曲，我不知道如何解决这个问题。我查看了鱼眼的documentation，但是当我使用codeflower.js时，我不知道如何再访问svg元素。任何帮助表示赞赏。谢谢。

Answer 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>

鱼眼失真和码头花

1 个答案: