Нажмите на SVG при щелчке и отцентрируйте выбранный элемент в области просмотра (d3.js) - PullRequest
Новая
       30

Нажмите на SVG при щелчке и отцентрируйте выбранный элемент в области просмотра (d3.js)

0 голосов
/ 21 мая 2018

Я работаю над картой интерактивного макета, используя svg, d3.js и jquery-svgpan.js.

Это пример того, как это будет выглядеть: http://maps -charlotte.com / img / 1200 / panthers-stadium-map.jpg

Что янеобходимо: когда пользователь нажимает на любой из отдельных разделов, весь макет увеличивается, а раздел, на котором щелкнул пользователь, должен быть центрирован на экране.

Этот пример наиболее близок к тому, чего я хочу достичь: https://bl.ocks.org/mbostock/2206590

Дело в том, что я добавляю свой встроенный код svg, в то время как в примере используется файл JSON, поэтому я не могу понять, какой код javascript соотносится с картой / json, а какой сфункция масштабирования / центрирования.(Также я новичок в D3)

Это код, который у меня есть до сих пор - он масштабирует и панорамирует, но не имеет щелчка, чтобы увеличить / центрировать функциональность.Как мне лучше всего этого добиться?

Я ценю вашу помощь. 

<!DOCTYPE HTML>

<html>

<head>
  <!-- jQuery -->
  <script type="text/javascript" src="js/jquery.js"></script>

  <!-- pan/zoom -->
  <script type="text/javascript" src="js/d3.v2.js"></script>
  <script type="text/javascript" src="js/jquery-svgpan.js"></script>

</head>

<body>

  <style>
    svg {
      cursor: pointer;
    }
  </style>


  <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100vh" xmlns="http://www.w3.org/2000/svg"
    xlink="http://www.w3.org/1999/xlink">

    <g id="viewport">

      <g>
        <rect x="248" y="53" width="28" height="141" class="cls-1" id="B2" />
        <rect x="276" y="53" width="28" height="141" class="cls-1" id="B3" />
        <rect x="304" y="53" width="28" height="141" class="cls-1" id="B4" />
        <rect x="332" y="53" width="28" height="141" class="cls-1" id="B5" />
        <rect x="360" y="53" width="28" height="141" class="cls-1" id="B6" />
        <rect x="388" y="53" width="28" height="141" class="cls-1" id="B7" />
        <rect x="416" y="53" width="28" height="141" class="cls-1" id="B8" />
        <rect x="444" y="53" width="28" height="141" class="cls-1" id="B9" />
        <rect x="472" y="53" width="28" height="141" class="cls-1" id="B10" />
        <rect x="500" y="53" width="28" height="141" class="cls-1" id="B11" />
        <rect x="528" y="53" width="28" height="141" class="cls-1" id="B12" />
        <rect x="556" y="53" width="28" height="141" class="cls-1" id="B13" />
        <rect x="584" y="53" width="28" height="141" class="cls-1" id="B14" />
        <rect x="612" y="53" width="28" height="141" class="cls-1" id="B15" />
        <rect x="640" y="53" width="28" height="141" class="cls-1" id="B16" />
        <rect x="668" y="53" width="28" height="141" class="cls-1" id="B17" />
        <rect x="696" y="53" width="28" height="141" class="cls-1" id="B18" />
        <rect x="724" y="53" width="28" height="141" class="cls-1" id="B19" />
      </g>

      <g>
        <rect x="794" y="233" width="141" height="28" class="cls-1" id="B21" />
        <rect x="794" y="261" width="141" height="28" class="cls-1" id="B22" />
        <rect x="794" y="289" width="141" height="28" class="cls-1" id="B23" />
        <rect x="794" y="317" width="141" height="28" class="cls-1" id="B24" />
        <rect x="794" y="345" width="141" height="28" class="cls-1" id="B25" />
        <rect x="794" y="373" width="141" height="28" class="cls-1" id="B26" />
        <rect x="794" y="401" width="141" height="28" class="cls-1" id="B27" />
        <rect x="794" y="429" width="141" height="28" class="cls-1" id="B28" />
        <rect x="794" y="457" width="141" height="28" class="cls-1" id="B29" />
        <rect x="794" y="485" width="141" height="28" class="cls-1" id="B30" />
        <rect x="794" y="513" width="141" height="28" class="cls-1" id="B31" />
        <rect x="794" y="541" width="141" height="28" class="cls-1" id="B32" />
      </g>

      <g>
        <!--reverse-->
        <rect x="248" y="607" width="28" height="141" class="cls-1" id="B51" />
        <rect x="276" y="607" width="28" height="141" class="cls-1" id="B50" />
        <rect x="304" y="607" width="28" height="141" class="cls-1" id="B49" />
        <rect x="332" y="607" width="28" height="141" class="cls-1" id="B48" />
        <rect x="360" y="607" width="28" height="141" class="cls-1" id="B47" />
        <rect x="388" y="607" width="28" height="141" class="cls-1" id="B46" />
        <rect x="416" y="607" width="28" height="141" class="cls-1" id="B45" />
        <rect x="444" y="607" width="28" height="141" class="cls-1" id="B44" />
        <rect x="472" y="607" width="28" height="141" class="cls-1" id="B43" />
        <rect x="500" y="607" width="28" height="141" class="cls-1" id="B42" />
        <rect x="528" y="607" width="28" height="141" class="cls-1" id="B41" />
        <rect x="556" y="607" width="28" height="141" class="cls-1" id="B40" />
        <rect x="584" y="607" width="28" height="141" class="cls-1" id="B39" />
        <rect x="612" y="607" width="28" height="141" class="cls-1" id="B38" />
        <rect x="640" y="607" width="28" height="141" class="cls-1" id="B37" />
        <rect x="668" y="607" width="28" height="141" class="cls-1" id="B36" />
        <rect x="696" y="607" width="28" height="141" class="cls-1" id="B35" />
        <rect x="724" y="607" width="28" height="141" class="cls-1" id="B34" />
      </g>

      <g>
        <!--reverse-->
        <rect x="65" y="233" width="141" height="28" class="cls-1" id="B64" />
        <rect x="65" y="261" width="141" height="28" class="cls-1" id="B65" />
        <rect x="65" y="289" width="141" height="28" class="cls-1" id="B66" />
        <rect x="65" y="317" width="141" height="28" class="cls-1" id="B67" />
        <rect x="65" y="345" width="141" height="28" class="cls-1" id="B68" />
        <rect x="65" y="373" width="141" height="28" class="cls-1" id="B69" />
        <rect x="65" y="401" width="141" height="28" class="cls-1" id="B70" />
        <rect x="65" y="429" width="141" height="28" class="cls-1" id="B71" />
        <rect x="65" y="457" width="141" height="28" class="cls-1" id="B72" />
        <rect x="65" y="485" width="141" height="28" class="cls-1" id="B73" />
        <rect x="65" y="513" width="141" height="28" class="cls-1" id="B74" />
        <rect x="65" y="541" width="141" height="28" class="cls-1" id="B75" />
      </g>

    </g>
  </svg>

  <script type="text/javascript">

    $(document).ready(function () {

      var w = 960,
        h = 500;

      var svg = d3.select("#chart")
        .append("svg")
        .attr("width", w)
        .attr("height", h)
        .attr("class", "PiYG")
        .on("mousemove", update);

      // This was added to the example
      var g = svg.append('g')
        .attr('id', 'viewport');

      function update() {}

      $('svg').svgPan('viewport');

    });

    var zoom = d3.behavior.zoom()

  </script>
</body>

</html>
...