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

Question

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

полный образец в 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/