d3. js переполнение графика с экрана - PullRequest
Новая
       17

d3. js переполнение графика с экрана

0 голосов
/ 09 апреля 2020

Я пробую пример neo4j mov ie при весенней загрузке (исходный код: https://github.com/neo4j-examples/movies-java-spring-data-neo4j)

Пример снимка экрана: http://my-neo4j-movies-app.herokuapp.com/

Я рисую график каждой загрузки страницы и очищаю и перерисовываю в каждой операции поиска mov ie в соответствии с новыми данными. Но график переполняет экран, или я нажал кнопку мыши и перетащил график на новую позицию. когда я отпустил кнопку, график вернулся в старое положение.

Как я могу указать предел на экране для графика?

Или когда я нажимаю кнопку мыши вниз, как график может сохранить эту позицию ?

Вот мой JS; 

$(document).ready(function(){      
       var margin = {
           top: 20,
           right: 120,
           bottom: 20,
           left: 120
         },
         width = 1000 - margin.right - margin.left,
         height = 1000 - margin.top - margin.bottom;

        var svg = d3.select("#graph").append("svg")
                .attr("width", '100%')
                .attr("height", '100%')
                .attr('viewBox','0 0'+' '+Math.min(width,height)+' '+Math.min(width,height))
                .attr('preserveAspectRatio','xMinYMin')
                .append("g")
                .attr("transform", "translate(" + Math.min(width,height) / 2 + "," + Math.min(width,height) / 2 + ")")
                .attr("pointer-events", "all");        
});

$(function () {
    function search() {
                    //do something
                    //...
                    drawGraph();
            return false;
        }

    function drawGraph() {
        var query=$("#search").find("input[name=search]").val();
        d3.selectAll("svg > *").remove();//clear old graph
        var width = 1000, height = 1000;
        var force = d3.layout.force()
                    .charge(-200).linkDistance(30).size([width, height]);
        var svg = d3.select("#graph").selectAll("svg");
        d3.json("/graph?movieName="+encodeURIComponent(query), function(error, graph) {
            if (error) return;

            force.nodes(graph.nodes).links(graph.links).start();

            var link = svg.selectAll(".link")
                    .data(graph.links).enter()
                    .append("line").attr("class", "link");

           var node = svg.selectAll(".node")
                    .data(graph.nodes).enter()
                    .append("circle")
                    .attr("class", function (d) { return "node "+d.label })
                    .attr("r", 10)
                    .call(force.drag);

            // html title attribute
            node.append("title")
                    .text(function (d) {
                    return d.titleName;
                    })

            // force feed algo ticks
           force.on("tick", function() {
                link.attr("x1", function(d) { return d.source.x; })
                        .attr("y1", function(d) { return d.source.y; })
                        .attr("x2", function(d) { return d.target.x; })
                        .attr("y2", function(d) { return d.target.y; });

                node.attr("cx", function(d) { return d.x; })
                        .attr("cy", function(d) { return d.y; });
            });
        });
    }
});
...