D3 working properly only in first instance of Vue 3 component

Question

I'm working on Vue 3 app where I would like to use multiple instances of one component. Each component should have its instance of D3 for displaying various SVG images. In my case D3 works as intended only on first instance of Vue component.

Dots are random generated by D3. I can see when inspecting elements that none of dots has been appended in second instance of component. Screenshot of the problem may be found here.

My component with D3 looks like this:

<template>
  <div class="fill-100">
    <svg ref="svgRef" width="400" height=667>
      <g></g>
    </svg>
  </div>
</template>

<script>

import {ref, onMounted} from "@vue/runtime-core";
import {select, zoom} from "d3";

export default {
  name: "SldSvgD3",
  props: ["id"],
  setup() {
    const svgRef = ref(null);

    onMounted(() =>{
      const svg = select(svgRef.value);
      svg.append("svg")


      let data = [], width = 400, height = 667, numPoints = 100;

      let zoom3 = zoom()
        .on('zoom', handleZoom);

      function handleZoom(e) {
          select('svg g')
          .attr('transform', e.transform);
      }

      function initZoom() {
        select('svg')
          .call(zoom3);
      }

      function updateData() {
        data = [];
        for(let i=0; i<numPoints; i++) {
          data.push({
            id: i,
            x: Math.random() * width,
            y: Math.random() * height
          });
        }
      }

      function update() {
        select('svg g')
          .selectAll('circle')
          .data(data)
          .join('circle')
          .attr('cx', function(d) { return d.x; })
          .attr('cy', function(d) { return d.y; })
          .attr('r', 3);
      }

      initZoom();
      updateData();
      update();

    });

    return {svgRef}
  }
}

</script>


<style lang="scss">
  .fill-100{
    width: 100%;
    height: 100%;
  }
</style>

Implementation of D3 zoom and pan taken from this site

patrpok · Accepted Answer · 2021-09-02 11:38:35Z

What I didn't know is that scope of d3.select() call is global for the whole app. Solution in my case was just creating unique id for root div and selecting this div before any manipulation.

This question was very helpful to me.

Complete code:

<template>
  <div class="fill-100" :id="'sld_div'+this.id">
  </div>
</template>

<script>

import {ref, onMounted} from "@vue/runtime-core";
import * as d3 from "d3";

export default {
  name: "SldSvgD3",
  props: ["id"],
  setup(props) {
    const svgRef = ref(null);
    const svg_width = 400;
    const svg_height = 667;

    onMounted(() =>{

        const svg = d3
          .select("#sld_div"+props.id)
        svg.append("svg")
          .attr("id","sld_root"+props.id)
          .attr("width", svg_width)
          .attr("height", svg_height)
        .append("g")
          .attr("id","sld_root_g"+props.id)

      let data = [], width = 600, height = 400, numPoints = 100;

      let zoom = d3.zoom()
        .on('zoom', handleZoom);

      function handleZoom(e) {
        d3.select("#sld_div"+props.id)
          .select('svg g')
          .attr('transform', e.transform);
      }

      function initZoom() {
        d3.select("#sld_div"+props.id)
          .select('svg')
          .call(zoom);
      }

      function updateData() {
        data = [];
        for(let i=0; i<numPoints; i++) {
          data.push({
            id: i,
            x: Math.random() * width,
            y: Math.random() * height
          });
        }
      }

      function update() {
        d3.select("#sld_div"+props.id)
          .select('svg g')
          .selectAll('circle')
          .data(data)
          .join('circle')
          .attr('cx', function(d) { return d.x; })
          .attr('cy', function(d) { return d.y; })
          .attr('r', 3);
      }

      initZoom();
      updateData();
      update();

    });

    return {svgRef}
  }
}

</script>


<style lang="scss">
  .fill-100{
    width: 100%;
    height: 100%;
  }
</style>

Collectives™ on Stack Overflow

D3 working properly only in first instance of Vue 3 component

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related