我有this visualization我正在尝试将鱼眼 View 添加到图表中。我尝试在 plotData
函数中添加以下行,但它没有发生:
var fisheye = d3.fisheye.circular()
.radius(120);
svg.on("mousemove", function () {
fisheye.focus(d3.mouse(this));
circle.each(function (d) {
d.fisheye = fisheye(d);
});
});
关于如何解决这个问题有什么想法吗?
谢谢!
最佳答案
首先,您的 d3.timer
永远不会停止运行。这让我的机器发疯(CPU 100%)并降低了鱼的性能。我真的不确定你在那里做什么,所以暂时忽略它。
你的鱼眼需要一点按摩。首先,它希望数据像素的位置存储在 d.x 和 d.y 属性中。您可以在绘制圆圈时捏造这一点:
circle
.attr("cx", function(d, i) { d.x = X(d[0]); return d.x; })
.attr("cy", function(d, i){ d.y = Y(d[1]); return d.y; });
其次,您要分多个步骤绘制数据,因此您需要选择鱼眼的所有圆圈。第三,您忘记了实际使点增大和缩小的代码:
svg.on("mousemove", function () {
fisheye.focus(d3.mouse(this));
// select all the circles
d3.selectAll("circle.data").each(function(d) { d.fisheye = fisheye(d); })
// make them grow and shrink and dance
.attr("cx", function(d) { return d.fisheye.x; })
.attr("cy", function(d) { return d.fisheye.y; })
.attr("r", function(d) { return d.fisheye.z * 4.5; });
});
已更新example .
关于javascript - 使用 D3 JS 将鱼眼添加到轴,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31224479/