Not uploading CSV file in vue.js

Question

I have started with vue and D3. I just want to show my csv data in the console but when I try to do it with D3 CSV function is not working at all. Appears an array of 16 HTML elements which are in index.html, would you mind helping me with this?

This is my project structure:

This is my component code:

<template>

</template>

<script>

import * as d3 from "d3";
import { csv } from 'd3';

export default {
    name: 'mycomponent',
    data() {
        return{
            dataset: [],
        }
    },
    async mounted(){
        const data = await d3.csv('./datasets/dataset.csv')
        this.$data.$dataset = Object.freeze(data)
        console.log(data);
    }
}


</script>

This is home:

<template>
    <mycomponent></mycomponent>
</template>

<script>

import mycomponent from '@/components/mycomponent.vue'

export default {
  name: 'Home',
  components: {
    mycomponent,
  },
}
</script>

And this is what I get in console:

User 28 · Accepted Answer · 2020-07-16 12:05:24Z

1

The d3.csv function will execute at runtime not compile-time so you have to put your csv file in public directory then use it as usual public files.

let data = await d3.csv("/datasets/dataset.csv")

Or if you want to load your csv file at compile-time you can import it as string and use d3.csvParse instead.

import dataset from '@/datasets/dataset.csv'

let data = d3.csvParse(dataset);

I would prefer the first method, in the second method your csv file might cause your script file too big.

Example

answered Jul 16, 2020 at 12:05

User 28

5,1781 gold badge22 silver badges35 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Not uploading CSV file in vue.js

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related