简单散点图上的D3 Fisheye畸变
简单散点图上的D3 Fisheye畸变
提问于 2014-05-01 12:12:26
我试图在一个简单的散点图上实现d3鱼眼失真(http://bost.ocks.org/mike/fisheye/)。
这里是我到目前为止所掌握的代码：http://plnkr.co/edit/yDWld6?p=preview
我很不确定该如何称呼圆圈来进行扭曲。目前看来是这样的，但到目前为止，“摩丝情欲”还没有发生任何变化。
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 });
});谢谢你的帮助！
回答 1
Stack Overflow用户
回答已采纳
发布于 2014-05-01 15:28:26
你必须为鱼眼插件准备数据：
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; });
});我也做了声明的鱼眼，根据最新的正式版本插件，我使用了下面的按钮链接。
所以，这是一个扑通，它对散射点施加了鱼眼畸变。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/23407421
复制相关文章
相似问题
腾讯云开发者
