Adding Graphics to a Vue App with D3 — Circle, Ellipse, and Transforms

D3 lets us add graphics to a front-end web app easily.

Vue is a popular front end web framework.

They work great together. In this article, we’ll look at how to add graphics to a Vue app with D3.

Circle Element

We can add a circle with D3 into our Vue app.

For example, we can write:

<template>
  <div id="app">
    <div id="svgcontainer"></div>
  </div>
</template>

<script>
import * as d3 from "d3";
import Vue from "vue";

export default {
  name: "App",
  mounted() {
    Vue.nextTick(() => {
      const width = 300;
      const height = 300;
      const svg = d3
        .select("#svgcontainer")
        .append("svg")
        .attr("width", width)
        .attr("height", height);
      svg
        .append("circle")
        .attr("cx", 200)
        .attr("cy", 50)
        .attr("r", 20)
        .attr("fill", "lightgreen");
    });
  },
};
</script>

to add the circle.

We create the svg element with the d3.select method.

We select the div with ID svgcontainer .

Then we set the width and height with the attr method to set the width and height of the svg element.

Then we add the circle by calling append with the 'circle' argument.

And we set the x and y coordinates of the center of the circle with the attr method.

'cx' sets the x coordinate of the center.

And 'cy' sets the y coordinate of the center.

'fill' sets the background color of the circle.

'r' sets the radius of the circle.

Ellipse Element

To add an ellipse, we can do something similar.

For instance, we can write:

<template>
  <div id="app">
    <div id="svgcontainer"></div>
  </div>
</template>

<script>
import * as d3 from "d3";
import Vue from "vue";

export default {
  name: "App",
  mounted() {
    Vue.nextTick(() => {
      const width = 300;
      const height = 300;
      const svg = d3
        .select("#svgcontainer")
        .append("svg")
        .attr("width", width)
        .attr("height", height);
      svg
        .append("ellipse")
        .attr("cx", 200)
        .attr("cy", 50)
        .attr("rx", 100)
        .attr("ry", 50)
        .attr("fill", "lightgreen");
    });
  },
};
</script>

We changed 'circle' to 'ellipse' .

Then we add the 'rx' and 'ry' attributes instead of 'r' .

'rx' sets the horizontal radius and 'ry' sets the vertical radius.

SVG Transformation

We can transform SVGs with D3.

For example, we can write:

<template>
  <div id="app">
    <div id="svgcontainer"></div>
  </div>
</template>

<script>
import * as d3 from "d3";
import Vue from "vue";

export default {
  name: "App",
  mounted() {
    Vue.nextTick(() => {
      const width = 300;
      const height = 300;
      const svg = d3
        .select("#svgcontainer")
        .append("svg")
        .attr("width", width)
        .attr("height", height);

      const group = svg
        .append("g")
        .attr("transform", "translate(60, 60) rotate(30)");

      const rect = group
        .append("rect")
        .attr("x", 20)
        .attr("y", 20)
        .attr("width", 60)
        .attr("height", 30)
        .attr("fill", "green");
    });
  },
};
</script>

First, we call attr with the 'transform' string to set the transform CSS property of the svg element.

translate(60, 60) moves the SVG 60 pixels right and down respectively.

rotate(30) rotates the SVG by 30 degrees.

Then we call append the rectangle with the append method with the 'rect' as the argument and set all the attributes.

Conclusion

We can add circles and ellipses, and transform shapes with D3 in a Vue app.