search

skokenes / d3-lasso

A lasso plugin for d3
BSD 3-Clause "New" or "Revised" License
88 stars 35 forks source link

using d3-lasso with Vue.js #10

Open zzusunjs opened 4 years ago

zzusunjs commented 4 years ago

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 commented 4 years ago

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 commented 4 years ago

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