Adding Graphics to a Vue App with D3

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.

Getting Started

We install D3 by running npm i d3 .

Then we can use it in our Vue app.

Data Join

Now that we installed D3, we can use it in our app.

D3 lets us render an array of items into a list easily.

To do this, we write:

<template>
  <div id="app">
    <ul id="list">
      <li v-for="n of arr.length"></li>
    </ul>
  </div>
</template>

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

export default {
  name: "App",
  data() {
    return {
      arr: [10, 20, 30, 25, 15],
    };
  },
  mounted() {
    Vue.nextTick(() => {
      d3.select("#list")
        .selectAll("li")
        .data(this.arr)
        .text((d) => d);
    });
  },
};
</script>

to render the numbers in arr into the li elements.

d3.select selects the ul with ID list .

Then we call selectAll to select all the li s inside.

And then we call data to return the data.

And text to set the text of each li .

Now the numbers should be in the list.

The D3 code is in the Vue.nextTick callback so that we get the li s after they’re rendered.

SVG

We can add SVGs in a Vue app 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);
      svg
        .append("line")
        .attr("x1", 100)
        .attr("y1", 100)
        .attr("x2", 200)
        .attr("y2", 200)
        .style("stroke", "rgb(255,0,0)")
        .style("stroke-width", 2);
    });
  },
};
</script>

We select the div with ID svgcontainer .

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

Then we add a line with the append method with the 'line' argument.

We set the x1 and y1 attributes to add the x and y coordinates of the start of the line.

And we do the same with the end of the line with the x2 and y2 attributes.

The style method sets the styles.

stroke sets the line color and stroke-width sets the line width.

Rectangle

We can add a rectangle by calling the append method with the 'rect' argument:

<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("rect")
        .attr("x", 20)
        .attr("y", 20)
        .attr("width", 200)
        .attr("height", 100)
        .attr("fill", "green");
    });
  },
};
</script>

Then we set the x and y attributes to add the x and y coordinates of the top left corner of the rectangle.

And we call attr with 'width' and 'height' to set the width and height of the rectangle.

'fill' sets the background color of the rectangle.

Conclusion

We can add basic shapes to our Vue app with D3.