Как вы можете нарисовать график поверх плана этажа SVG? - PullRequest
Новая
       64

Как вы можете нарисовать график поверх плана этажа SVG?

0 голосов
/ 28 апреля 2020

У меня есть график, который состоит из точек внутри здания и расстояний между этими точками. Я также сделал простой файл SVG как план здания.

Я сделал график с использованием vis-network library . Поскольку я также хочу иметь возможность увеличивать план этажа, я использую SVG-pan-zoom library . Мне нужно объединить план этажа и график, чтобы пользователь мог видеть график визуально и поверх фактического плана этажа.

В настоящее время невозможно прокрутить и увеличить масштаб плана этажа (это возможно только при удалении элемента div графика), когда вы прокручиваете, единственное, что становится больше / меньше, это график. Теперь это выглядит так:

https://i.stack.imgur.com/J10hr.png

Мой HTML выглядит так: 

 <div id="container" style="width: 100%; height: 500px;">
  <svg
    id="demo-tiger"
    version="1.1"
    xmlns="http://www.w3.org/2000/svg"
    xmlns:xlink="http://www.w3.org/1999/xlink"
    preserveAspectRatio="xMidYMid meet"
    viewBox="145.8421052631579 40.57894736842097 323.47368421052636 207.15789473684214"
    width="100%"
    height="500px"
  >
    <defs>
      <path
        d="M248.95 140L238.42 140L238.42 160.53L398.42 160.53L398.42 104.74L362.63 104.74L362.63 41.58L392.11 41.58L392.11 81.05L398.42 81.05L398.42 41.58L466.32 41.58L466.32 244.74L146.84 244.74L146.84 56.32L146.84 41.58L274.21 41.58L274.21 93.16L257.89 93.16L238.42 93.16L238.42 99.47L274.21 99.47L274.21 111.05L238.42 111.05L238.42 126.84L248.95 126.84L286.84 126.84"
        id="l1IQqnRCoP"
      />
    </defs>
    <g>
      <g>
        <g>
          <use
            xlink:href="#l1IQqnRCoP"
            opacity="1"
            fill-opacity="0"
            stroke="#000000"
            stroke-width="1"
            stroke-opacity="1"
          />
        </g>
      </g>
    </g>
  </svg>
  <div id="canvas2" class="canvas" style="width: 100%; height: 600px"></div>
</div>

Мой javascript выглядит так this: 

  SvgPanZoom("#demo-tiger", {
    zoomEnabled: true,
    fit: true,
    center: true
  });


  var nodes = [];
  var edges = [];
  this.graphData.nodesJSON.nodes.forEach(node => {
    nodes.push({
      id: node.zone_id,
      label: node.zone_name
    });
  });

  this.graphData.edgesJSON.edges.forEach(edge => {
    edges.push({
      from: edge.link_id_from,
      to: edge.link_id_to,
      label: "" + edge.distance
    });
  });

  // create a network
  var container = document.getElementById("canvas2");
  var data = {
    nodes: nodes,
    edges: edges
  };
  var options = {
    physics: {
      enabled: false
    }
  };
  var network = new vis.Network(container, data, options);

Мой стиль такой: 

 #canvas2 { position: absolute; top: 0; left: 0; }

Не знаю, стоит ли упоминать, но я использую VueJS в качестве фреймворка. Кто-нибудь может мне помочь?

...