D3 Force Directed Zoom Issue

ラベルとズーム機能を備えたフォースディレクティブD3プロットを設定しようとしています。私はそれが次のエラースロー、その時点でズームしてみてくださいまで、すべてが動作します：D3 Force Directed Zoom Issue

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 Directed Zoom Issue

答えて

関連する問題