0

我已经成功地为示例数据集实现了代码花视图。用于实现这一点的代码是：

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

我现在希望在这个可视化中添加鱼眼失真，但不知道该怎么做。我查看了 fisheye 的文档，但是当我使用 codeflower.js 时，我不知道如何访问 svg 元素了。任何帮助表示赞赏。谢谢你。

4

1 回答 1

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>
于 2015-03-03T07:13:37.153 回答