Question

我试图添加缩放功能，但是没有用。

我不知道这是什么问题。我想知道问题出在哪里，我该如何解决。

我尝试使用此网站的来源（https://bl.ocks.org/puzzler10/91a6b53d4237c97752d0e466443dad0b）

这是我的代码：

 Android Studio 3.1.4
 Build #AI-173.4907809, built on July 24, 2018
 JRE: 1.8.0_152-release-1024-b01 x86_64
 JVM: OpenJDK 64-Bit Server VM by JetBrains s.r.o
 Mac OS X 10.13.6

不显示图形。但是，当我删除与缩放有关的代码时，它显示得很好。有什么好主意吗？

Answer 1

您的zoomed函数是在d3.json()回调块中定义的，您需要像这样分割缩放代码段，以使d3.zoom的缩放函数可见。

<!DOCTYPE html>
<html>
  <head>
    <script type="text/javascript" src="https://d3js.org/d3.v3.js"></script>
    <style>
      body{ font-family: 'Hanna' 12px; text-align: center;}

      .link {
        stroke: #ccc;
      }

      .node text {
        pointer-events: none;
        font: sans-serif;
      }
    </style>
    <link rel="stylesheet" type="text/css" href="main.css">
  </head>
  <body>
  <script type="text/javascript">
  //Set margins and sizes
  var margin = {
    top: 20,
    bottom: 50,
    right: 30,
    left: 50
  };
  var width = 960 - margin.left - margin.right;
  var height = 700 - margin.top - margin.bottom;

 var zoom = d3.behavior.zoom()
    .scaleExtent([0.1, 10])

  //Load Color Scale
  var c10 = d3.scale.category10();
  //Create an SVG element and append it to the DOM
  var svgElement = d3.select("body")
            .append("svg")
            .attr({"width": width+margin.left+margin.right, "height": height+margin.top+margin.bottom})
            .append("g")
            .attr("transform","translate("+margin.left+","+margin.top+")")
            .call(zoom);
  //Load External Data
  d3.json("idol_gen1.json", function(dataset){


 zoom
    .on("zoom", zoomed);

    //Extract data from dataset
    var nodes = dataset.nodes,
      links = dataset.links;
    //Create Force Layout
    var force = d3.layout.force()
            .size([width, height])
            .nodes(nodes)
            .links(links)
            .gravity(0.05)
            .charge(-200)
            .linkDistance(200);
    //Add links to SVG
    var link = svgElement.selectAll(".link")
          .data(links)
          .enter()
          .append("line")
          .attr("stroke-width", function(d){ return d.value*0.5; })
          .attr("class", "link");
    //Add nodes to SVG
    var node = svgElement.selectAll(".node")
          .data(nodes)
          .enter()
          .append("g")
          .attr("class", "node")
          .call(force.drag);
    //Add labels to each node
    var label = node.append("text")
            .attr("dx", 12)
            .attr("dy", "0.35em")
            .attr("font-size", function(d){ return Math.max(9, d.impor * 1.5);  })
            .text(function(d){ return d.name; });
    //Add circles to each node
    var circle = node.append("circle")
            .attr("r", function(d){ return Math.max(5, Math.sqrt(d.impor || 0)); })
            .attr("fill", function(d){ return c10(d.type); });
    //This function will be executed for every tick of force layoutz
    force.on("tick", function(){
      //Set X and Y of node
      node
        .attr("cx", function(d){ return d.x; })
        .attr("cy", function(d){ return d.y; });
      //Set X, Y of link
      link.attr("x1", function(d){ return d.source.x; })
      link.attr("y1", function(d){ return d.source.y; })
      link.attr("x2", function(d){ return d.target.x; })
      link.attr("y2", function(d){ return d.target.y; });
      //Shift node a little
        node.attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; });
    });

    function zoomed() {
      svg.attr("transform", "translate(" + d3.event.translate + ")scale(" + d3.event.scale + ")");
    }

    force.start();

  });
  </script>
  </body>
</html>

D3强制布局缩放功能不起作用

1 个答案: