D3 Force定向缩放问题

我正在尝试设置一个强制定向D3标签和缩放功能。一切工作，直到我试图放大此时它引发以下错误：D3 Force定向缩放问题

d3.v4.js:7637 Error: Invalid value for <svg> attribute transform="translate(undefined) scale(undefined)"(anonymous function) @ d3.v4.js:7637selection_each @ d3.v4.js:7616selection_attr @ d3.v4.js:7673(anonymous function) @ (index):36dispatch.apply @ d3.v4.js:4536customEvent @ d3.v4.js:7280Gesture.emit @ d3.v4.js:12207Gesture.zoom @ d3.v4.js:12195wheeled @ d3.v4.js:12239(anonymous function) @ d3.v4.js:7204

贝娄是D3的代码，任何建议将不胜感激：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 


<html> 

    <head> 
     <script src="https://d3js.org/d3.v4.js"></script> 
    </head> 

<style> 
     .node text { 
       pointer-events: none; 
       font: 10px sans-serif; 
       } 

     .links line { 
       stroke-opacity: 0.9; 
       } 

     .nodes circle { 
       stroke: #fff; 
       stroke-width: 5.5px; 
       } 

</style> 

<body> 

       <svg width="1000" height="800"></svg> 


       <script> 


         var svg = d3.select("svg").call(d3.zoom().on("zoom", function() { 
    svg.attr("transform", "translate(" + d3.event.translate + ")" + " scale(" + d3.event.scale + ")") 
    })), 
         width = +svg.attr("width"), 
         height = +svg.attr("height"); 

         var color = d3.scaleOrdinal(d3.schemeCategory20); 

         var simulation = d3.forceSimulation() 
         .force("link", d3.forceLink().id(function(d) { return d.id; })) 
         .force("charge", d3.forceManyBody()) 
         .force("center", d3.forceCenter(width/2, height/2)); 

         d3.json("static/graphFile.json", function(error, graph) { 
           if (error) throw error; 

         var link = svg.append("g") 
       .attr("class", "links") 
           .selectAll("line") 
           .data(graph.links) 
           .enter().append("line") 
           .attr("stroke", function(d) { return color(d.value); }) 
           .attr("stroke-width", function(d) { return Math.sqrt(d.value); }); 

        var node = svg.selectAll(".node") 
         .data(graph.nodes) 
         .enter().append("g") 
         .attr("class", "node") 
         .call(d3.drag() 
         .on("start", dragstarted) 
         .on("drag", dragged) 
         .on("end", dragended)); 

      node.append("text") 
       .attr("dx", 12) 
       .attr("dy", ".35em") 
       .text(function(d) { return d.id }); 

        node.append("circle").attr("r", 10) 
       .attr("fill", function(d) { return color(d.group); }) 

        simulation 
       .nodes(graph.nodes) 
       .on("tick", ticked); 

        simulation.force("link") 
       .links(graph.links); 

        function ticked() { 
         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; }); 
        node 
           .attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; });     
        } 




        }); 

        function dragstarted(d) { 
           if (!d3.event.active) simulation.alphaTarget(0.3).restart(); 
             d.fx = d.x; 
             d.fy = d.y; 
        } 

        function dragged(d) { 
             d.fx = d3.event.x; 
             d.fy = d3.event.y; 
        } 

        function dragended(d) { 
             if (!d3.event.active) simulation.alphaTarget(0); 
             d.fx = null; 
             d.fy = null; 
        } 


       </script> 

</body> 
</html>

来源

2016-08-13 secumind

显然，你不能变焦时你在D3图上设置了界限。我通过删除这些边界来解决这个问题。（积分：杰里米菲尔德）

var svg = d3.select("svg").call(d3.zoom().on("zoom", function() {svg.attr("transform", d3.event.transform)})).append("g"), 
       width = +svg.attr("width"), 
       height = +svg.attr("height");

来源

2016-08-13 22:42:30 secumind

你是什么意思的“边界”？ SVG的高度+宽度？我目前正在努力，试图让我的d3 v4力量有向图可缩放。看看这个（https://bl.ocks.org/mbostock/3127661b6f13f9316be745e77fdfb084），试图找出它在这个例子中的工作原理。 – Juri

如果您在边上设置边界，换句话说，您不允许图形通过边缘（边框）后面，则无法缩放。将var svg替换为我刚刚添加到上述响应中的代码。 – secumind

D3 Force定向缩放问题

回答

相关问题