本文介绍了D3在与标志的力图的鱼眼的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我喜欢新的鱼眼插件(http://bost.ocks.org/mike/fisheye/),但希望让它在使用路径和标记而不是线条的力图上工作。我是新的D3,到目前为止结合标记演示,鱼眼演示已经击败了我,我想知道是否有人成功了,可以指出我的方向正确。
I love the new fisheye plug in (http://bost.ocks.org/mike/fisheye/) but want to get it working on a force graph that uses paths and markers rather than lines. I am new to D3 and so far combining the markers demo, with the fisheye demo has defeated me, I wondered if anyone had been successful and could point me in the right direction.
Cheers Ben
Cheers Ben
推荐答案
vis.on(mousemove,function(){
if(rmbMenuHidden)
{
fisheye.center(d3.mouse(this));
vis.on("mousemove", function() { if (rmbMenuHidden) { fisheye.center(d3.mouse(this));
node
.each(function(d) { d.display = fisheye(d); })
.attr("cx", function(d) { return d.display.x; })
.attr("cy", function(d) { return d.display.y; })
.attr("r", function(d) { d.display.r=d.display.z * 10; return d.display.r;});
path.attr("d", function(d) {
var dx = d.t.display.x - d.s.display.x;
var dy = d.t.display.y - d.s.display.y;
var h= Math.sqrt(dx * dx + dy * dy);
var htr = h-d.t.display.r-d.edgeWidth-1;
var cos=dx/h;
var sin=dy/h;
var dxt = cos*htr+d.s.display.x;
var dyt = sin*htr+d.s.display.y;
//clip source to circle radius too
var dxs = cos*d.s.display.r+d.s.display.x;
var dys = sin*d.s.display.r+d.s.display.y;
var dx = d.t.display.x - d.s.display.x,
dy = d.t.display.y - d.s.display.y;
dr = Math.sqrt(dx * dx + dy * dy);
return "M" + d.s.display.x + "," + d.s.display.y + "A" + dr + "," + dr + " 0 0,1 " + dxt + "," + dyt;
});
}
}
这篇关于D3在与标志的力图的鱼眼的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!