D3简单散点图上的鱼眼失真

D3 Fisheye Distortion on simple Scatter plot

本文关键字：鱼眼 失真 简单 散点图 D3      更新时间：2023-09-26

我正在尝试实现d3鱼眼失真(http://bost.ocks.org/mike/fisheye/)在一个简单的散点图上。

以下是我迄今为止的代码：http://plnkr.co/edit/yDWld6?p=preview

我很不确定该如何称呼扭曲的圆圈。目前它看起来是这样的，但到目前为止"mousemove"没有发生任何事情。

svg.on("mousemove", function() {
  fisheye.center(d3.mouse(this));
  circles
    .selectAll("circle")
    .each(function (d) { d.fisheye = fisheye(d); })
    .attr("cx", function (d) { return d.fisheye.pages })
    .attr("cy", function (d) { return d.fisheye.books });
});

谢谢你的帮助！

您必须为鱼眼插件准备数据：

var circles = svg.selectAll("circle")
    .data(data)
  .enter()
  .append("circle")
    .datum( function(d) {
        return {x: d.pages, y: d.books} // change data, to feed to the fisheye plugin
    })
    .attr("cx", function (d) {return d.x}) // changed data can be used here as well
    .attr("cy", function (d) {return d.y}) // ...and here
    .attr("r", 2);
...
// now we can pass in the d.x and d.y values expected by the fisheye plugin...
circles.each(function(d) { d.fisheye = fisheye(d); })
    .attr("cx", function(d) { return d.fisheye.x; })
    .attr("cy", function(d) { return d.fisheye.y; })
    .attr("r", function(d) { return d.fisheye.z * 2; });
});

我还根据我在下面链接的plunk中使用的插件的最新官方版本对鱼眼的声明进行了更改。

所以，这是一个应用于散点图的鱼眼失真的PLUNK。

相关文章：