[Vuejs]-D3 in Vue application – How to apply zooming on a map

by

0👍

You identified the problem well. The zoom is made on the group (g).

Since you don’t have <g> you can add it like this:

<template>
  <svg>
    <g>
      <path
        v-for="(item, index) in features"
        :key="index"
        :stroke-width="countyBorderWidth"
        :class="{ active: isActive(index) }"
        :d="geoPath(item)"
        v-on:click="clickedCountry(index, item.id)"
      >
    </g>
  </svg>
</template>

and then select it in the method zoom:

zoom(item) {
    d3.select('g').transition()
      .duration(750)
      .attr('transform', 'translate(' + width / 2 + ',' + height / 2 + ')scale(' + k + ')translate(' + -x + ',' + -y + ')');

If you want to leave <g> out and continue with what you have, select the <svg> directly:

zoom(item) {
    d3.select('svg').transition()
      .duration(750)
      .attr('transform', 'translate(' + width / 2 + ',' + height / 2 + ')scale(' + k + ')translate(' + -x + ',' + -y + ')');

}

Alternatively you could do everything in the <script> part of your component and leave only <svg> in the <template> part:

<template>
  <svg></svg>
</template>

Then you specify the styling and the attributes as well as manage the events like click with D3.js. That would be the code from the linked example. You’ll need to reorganise it and group it into few methods.

Leave a comment