using d3-lasso with Vue.js

[zzusunjs]

Great work for skokenes. I am trying to use d3-lasso with Vue.js and d3.js and I got some problems here. The import part is import * as d3 from 'd3'; import * as d3Lasso from "d3-lasso"; and the lasso part is

this.lasso = d3Lasso.lasso()
                .closePathSelect(true)
                .closePathDistance(100)
                .items(this.images)
                .targetArea(this.svg)
                .on("start", this.lassoStart)
                .on("draw", this.lassoDraw)
                .on("end", this.lassoEnd);
            this.svg.call(this.lasso);

The error occurs at this.svg.call(this.lasso); which is

vue.esm.js?efeb:1897 ReferenceError: d3 is not defined
    at lasso (d3-lasso.js?12bb:776)
    at Selection.selection_call [as call] (d3.js?c414:7570)
    at VueComponent.selectZone (Cluster.vue?c9ab:123)
    at click (eval at ./node_modules/vue-loader/lib/template-compiler/index.js?{"id":"data-v-51d2b6fa","hasScoped":true,"transformToRequire":{"video":["src","poster"],"source":"src","img":"src","image":"xlink:href"},"buble":{"transforms":{}}}!./node_modules/vue-loader/lib/selector.js?type=template&index=0!./src/components/Cluster.vue (app.js:7537), <anonymous>:58:36)
    at invokeWithErrorHandling (vue.esm.js?efeb:1863)
    at VueComponent.invoker (vue.esm.js?efeb:2188)
    at invokeWithErrorHandling (vue.esm.js?efeb:1863)
    at VueComponent.Vue.$emit (vue.esm.js?efeb:3897)
    at VueComponent.handleClickLink (iview.js?3c40:10139)
    at invokeWithErrorHandling (vue.esm.js?efeb:1863)

So, what is going on and what should I do to fix this problem ?

[tinchit0]

I was facing the same issue and found there was a bug in the source code of the library (the one downloaded with npm install d3-lasso). It was making references to a global d3 without previously importing it.

This was fixed in this repository 8 months ago with this commit 35bb9054bce0ec86021f39e5dea0aaad6fe73aca. But it seems that the npm official package has not been updated. By now, if you install it from this GitHub repo with npm install skokenes/d3-lasso it should work fine (it does for me at least).

An update of the npm repo would definetely close this issue, and other related like #5

[skokenes]

Sorry about that, I will take a look into it. I am having trouble getting the project to build with rollup now, so I need some time to investigate that. Otherwise it would be an easy step to publish