Как отобразить весь график с помощью d3.js?

У меня есть набор данных 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.info(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.info(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.info(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>

может это поможет: stackoverflow.com/questions/47877019/plot-a-graph-using-d3-j‌ s

Zombie 02.09.2018 11:01

Можете ли вы опубликовать код, который вы написали до сих пор?

ksav 02.09.2018 14:56

Можете ли вы также добавить соответствующий HTML-код, к которому вы привязываетесь?

ksav 03.09.2018 11:43

Я изменил размер в силовой раскладке, и у меня это сработало.

nskrobonja95 03.09.2018 13:44
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
0
4
153
0

Другие вопросы по теме