魚眼失真插件的奇怪行爲

嗨我想用Fisheye Distortion plugin作爲我的力量指向圖d3.js，但是當我想應用這個插件時，圖的行爲很奇怪。我在d3.js新，並不擅長計算機圖形學。魚眼失真插件的奇怪行爲

var fisheye = d3.fisheye.circular() 
         .radius(200) 
         .distortion(2); 

    // graph - variable which represents whole graph      
    graph.svg.on("mousemove", function() { 
    fisheye.focus(d3.mouse(this)); 

    d3.select("svg").selectAll("circle").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 * 4.5; }); 


    d3.select("svg").selectAll("line").attr("x1", function(d) { return d.source.fisheye.x; }) 
           .attr("y1", function(d) { return d.source.fisheye.y; }) 
           .attr("x2", function(d) { return d.target.fisheye.x; }) 
           .attr("y2", function(d) { return d.target.fisheye.y; }); 
        });

怪異的行爲我的意思是圖的節點消失（被隱藏）鼠標懸停動作之後。

enter image description here

來源

2014-11-04 Matt

你見過[該工作示例（http://bost.ocks.org/mike/fisheye/）？ – 2014-11-04 19:00:25

是的，我看過那個例子 – Matt 2014-11-04 19:13:08

看起來它在你的圖上工作正常。它與你的預期有什麼不同？ – 2014-11-06 21:05:03

的問題是，你正在使用的代碼添加cx和cy的社交圈，但是你的社交圈實際上是封閉的內部nodeElements這是transform編入到位。

因此，改變了魚眼代碼爲以下解決了這個問題：

graph.svg.on("mousemove", function() { 
    fisheye.focus(d3.mouse(this)); 

    // Change transform on the .node 
    d3.select("svg").selectAll(".node") 
    .each(function(d) { d.fisheye = fisheye({ x: graph.x(d.x), y: graph.y(d.y) }); console.log(d.fisheye, d); }) 
    .attr("transform", function (d) { return "translate(" + d.fisheye.x + "," + d.fisheye.y + ")"; }) 
    // Now change the 'r'adius on the circles within 
    // One can also scale the font of the text inside nodeElements here 
    .select("circle") 
    .attr("r", function(d) { return 15 * graph.nodeSizeFactor * d.fisheye.z; }); 


    d3.select("svg").selectAll("line") 
    .attr("x1", function(d) { return d.source.fisheye.x; }) 
    .attr("y1", function(d) { return d.source.fisheye.y; }) 
    .attr("x2", function(d) { return d.target.fisheye.x; }) 
    .attr("y2", function(d) { return d.target.fisheye.y; }); 
});

注意，我也施加適當的尺度爲transform屬性graph.x和graph.y和15 * graph.nodeSizeFactor的圓的半徑（代替的4.5）。

工作演示：http://jsfiddle.net/90u4sjzm/23/

來源

2014-11-13 16:26:32

魚眼失真插件的奇怪行爲

回答

相關問題