Странное поведение плагина Fisheye Distortion

Question

Привет, я хотел бы использовать Fisheye Distortion plugin для моего нарисованного по силе графа в d3.js, но когда я хочу применить этот плагин, поведение графика будет странным. Я новичок в d3.js и не очень хорош в компьютерной графике.

complete sample in jsfiddle

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; }); 
        }); 

странное поведение я имею в виду узлы графа исчезают (скрыты) после того, как действие наведения мыши.

Answer 1

Проблема заключается в том, что вы использовали код для добавления 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; }); 
}); 

Обратите внимание, что я также применен надлежащему шкалу graph.x и graph.y для атрибута transform и 15 * graph.nodeSizeFactor для радиуса окружностей (вместо от 4.5).

Рабочая Демо: http://jsfiddle.net/90u4sjzm/23/