firminochangani

// App.vue

export default {
    name: "App.vue",
    data() {
        return {
            value: 5000
        };
    },
    methods: {

firminochangani

<template>
  <div class="plot-container">
  <!-- Svg element -->
    <svg :width="size.width + margin.left + margin.right" :height="size.height + margin.top + margin.bottom">
    <!-- Wrap plot elements -->
      <g :transform="`translate(${margin.left}, 10)`">
        <!-- Group axes -->
        <g class="plot__axes">
          <!-- Axes -->
          <g class="plot__axes__x" :transform="`translate(0, ${size.height})`"></g>

firminochangani

export default {
  name: "plotWithXandY",
  data() {
    return {
      size: {
        width: 0,
        height: 0
      },
      margin: {
        top: 20,

firminochangani

props: {
    height: {
      type: Number
    }
},
methods: {
    /**
     * setSizes: Will set the width and height of the plot
     */
    setSizes() {

firminochangani

/**
 * setScales: Will set the scales based in the type
 * of the date
 */
setScales() {
  // x axis scale
  this.scales.x = d3
    .scaleLinear()
    .domain([0, 100])
    .range([0, this.size.width]);

firminochangani

data() {
  return {
    size: {
      width: 0,
      height: 0
    },
    margin: {
      top: 20,
      bottom: 10,
      left: 20,

firminochangani

/**
 * renderAxes: Based on the x and y scales it will
 * render the axes in the svg.
 */
renderAxes() {
  const { x, y } = this.scales;
  d3.select(".plot__axes__x").call(d3.axisBottom(x));
  d3.select(".plot__axes__y").call(d3.axisLeft(y));
},

firminochangani

methods: {
  render() {
    this.setSizes();
    this.setScales();
    this.renderAxes();
  }
},
mounted(){
  this.render();
}

firminochangani

import * as d3 from "d3";

firminochangani

<template>
  <div id="app">
    <h1>Plot with x and y axes</h1>
    <plot :height="200"/>
  </div>
</template>

<script>
import plot from "@/components/plotWithXandYaxis.vue";
export default {