如何使用d3.js显示整个图形？

Question

我有一个已加载的json数据集，现在我试图以鸟瞰图显示它。但是我想首先设置缩放比例，以便显示整个图形，并且没有缩放或平移的可能性，我尝试使用缩放功能的各种变化，但似乎无济于事。有人可以提供一些有关如何使用d3进行操作的指导吗？预先感谢。

编辑

HTML：

 <div id="birdView" class="center">
      <svg id="bird" width="1000" height="700"></svg>
 </div>

脚本：

<script>
    var nodes2 = {
    {% for node in graph.nodes %}
        "node_{{node.identifier}}": { id: "node_{{node.identifier}}", name: "{{node.name}}" },
    {% endfor %}
};

    console.log(nodes2);

    var links2=[
    {% for node in graph.nodes%}
        {% for adjacent_node in node.neighbour_nodes %}
            {% for key,value in graph.get_nodes.items %}
                {%if key == adjacent_node %}{
                    source : "node_{{node.identifier}}",
                    target: "node_{{value.identifier }}"},
                {%endif%}
            {%endfor %}
        {%endfor %}
    {% endfor %}];

    console.log(links2);

    links2.forEach(function(link) {
    link.source = nodes2[link.source]
    link.target = nodes2[link.target]
    });


    //bird view
    var birdForce = d3.layout.force() 
            .size([500, 500])
            .nodes(d3.values(nodes2))
            .links(links2) 
            .on("tick", tickBird) //sta treba da se desi kada su izracunate nove pozicija elemenata
            .linkDistance(100) //razmak izmedju elemenata
            .charge(-100)//koliko da se elementi odbijaju
            .start(); //pokreni izracunavanje pozicija

    var birdSvg = d3.select('#bird');
    // add the links
    var link2 = birdSvg.selectAll('.link2')
         .data(links2)
         .enter().append('line')
         .attr('class', 'link2');

    var node2 = birdSvg.selectAll('.node2')
            .data(birdForce.nodes()) //add
            .enter().append('g')
            .attr('class', 'node2')
            .attr('id', function(d){return d.id + "2";})//da bi id bio jedinstven dodato je +2
            .attr('tekst', function(d){return d.name;});


    d3.selectAll('.node2').each(function(d){birdPrikaz(d);});

     function birdPrikaz(d){
          console.log(d.id);
          //Ubacivanje pravougaonika
          /*d3.select("g#"+d.name+"2").append('rect').
          attr('x',0).attr('y',0).attr('width',100).attr('height',10)
          .attr('fill','yellow');
          //Ubacivanje naziva cvora
          d3.select("g#"+d.id+"2").append('text').attr('x',50).attr('y',10)
          .attr('text-anchor','middle')
          .attr('font-size',textSize).attr('font-family','sans-serif')
          .attr('fill','green').text(d.name);

          //Ubacivanje razdelnika
          d3.select("g#"+d.id+"2").append('line').
          attr('x1',0).attr('y1',10).attr('x2',100).attr('y2',10)
          .attr('stroke','gray').attr('stroke-width',2);*/
          if(d.id == 'node_root') {
                d3.select("g#"+d.id+"2")
                .append('circle')
                .attr('r', 15)
                .style('fill','orange');

                d3.select("g#"+d.id+"2").append('text')
                .attr('text-anchor', 'middle')
                .attr('font-size', 12 )
                .style('fill', 'blue')
                .text(function(d){return d.name;});
          } else {
                 d3.select("g#"+d.id+"2")
                 .append('circle')
                 .attr('r', 10)
                 .style('fill','#60e42c');

                  d3.select("g#"+d.id+"2").append('text')
                  .attr('text-anchor', 'middle')
                  .attr('font-size', 12 )
                  .style('fill', 'red')
                  .text(function(d){return d.name;});
          }
        }

    function tickBird(e) {
            node2.attr("transform", function(d) {return "translate(" + d.x + "," + d.y + ")";})
                .call(birdForce.drag);
            link2.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; });

        }
</script>