d3-vue-example
d3-vue-example copied to clipboard
The tweet circles do not show
To fix change:
.entries(this.tweetData)
to
.entries(this.tweetData.tweets)
That does the opposite for me. It stops the chart from showing up. What particular problem does your solution fix?
When I followed the tutorial and started from a fresh vue project and set it up with yarn, I encountered the same issue and @ekoka's fix solves it.
When I checked out the project from Github, ran npm install, the original code works.
Vue files of both projects are identical.
There are some changes in package.json
11c11,12
< "d3": "^5.15.0",
---
> "core-js": "^3.6.5",
> "d3": "^5.16.0",
15,17c16,18
< "@vue/cli-plugin-babel": "^3.12.1",
< "@vue/cli-plugin-eslint": "^3.12.1",
< "@vue/cli-service": "^3.12.1",
---
> "@vue/cli-plugin-babel": "~4.4.0",
> "@vue/cli-plugin-eslint": "~4.4.0",
> "@vue/cli-service": "~4.4.0",
19,20c20,21
< "eslint": "^5.16.0",
< "eslint-plugin-vue": "^5.2.3",
---
> "eslint": "^6.7.2",
> "eslint-plugin-vue": "^6.2.2",
32d32
< "rules": {},
35,40c35,36
< }
< },
< "postcss": {
< "plugins": {
< "autoprefixer": {}
< }
---
> },
> "rules": {}
45c41
< "not ie <= 8"
---
> "not dead"
and babel.config.js
3c3
< '@vue/app'
---
> '@vue/cli-plugin-babel/preset'
The issue stems from a different structure in the data file tweets.json: