Zoomable Treemap With Vue.js And D3.js
The Vue.js plugin makes use of d3.js library to render a dynamic zoomable treemap for your app.
Vuejs+D3 Zoomable Treemap
An implementation, updated to d3v4, in Vuejs, of the D3 Zoomable Treemap.
# install dependencies npm install # serve with hot reload at localhost:8080 npm run dev # build for production with minification npm run build # build for production and view the bundle analyzer report npm run build --report # run unit tests npm run unit # run e2e tests npm run e2e # run all tests npm test
There's only one component that matters, in src/components/Treemap.vue, and you can extract it and use it in your own projects. The source data is a JSON file in static/flare.json. If you prefer, you can use this build as a base for your project, which uses the vuejs-webpack template, containing a webpack + vue-loader setup with hot reload, linting, testing & css extraction, and a router (vue router).
This implementation of a D3 visualization in Vuejs basically eliminates 3d-select and the need for an explicit rerender of the svg composition. It binds attributes to svg elements, and the svg structure, explicitly defined in the template, reflects the computed data, at any moment, taking advantage of the reactive nature of vuejs. Thus, by setting events (on click events in this project) on the svg elements, a new data tree can be refactored and the changes immediatly reflected in the visualization.
Cleanup a bit the code. There are still some inline styles in the svg.
Migrate some D3 function calls to Vuejs (the scales - scaleLinear and scaleOrdinal - probably).