skokenes / d3-lasso Goto Github PK

When selection is over, can I keep the lasso box

I'm using this package in one of my Angular application. Presently, I need to import "d3" package and set it to window variable to make lasso work. A snippet of code is as follows

import * as d3 from "d3";
...
...
@component()
export class mycomp {
constructor() {
window["d3"] = d3;
}

ngOnInit() {
initLasso();
}

initLasso() {
const targetAreaToSelectNodes = lasso()
.closePathSelect(true)
.closePathDistance(100)
.items(nodes)
.targetArea(svg);
targetAreaToSelectNodes.on("start", () => {
});
targetAreaToSelectNodes.on("draw", () => {
});
targetAreaToSelectNodes.on("end", this.onNodesSelectionEnd.bind(this, targetAreaToSelectNodes, d3));
svg.call(targetAreaToSelectNodes);
}

}

Does anyone here think this can be done a little differently?

Use case: I created a scatter plot and implemented a lasso selection on it. Let's say I have a nodes with names as [1, 2, 3, .....10]. Now I am able to select the nodes 2,3,7,10 using lasso and stored this values in a array. Now I want to invert this operation, like when I give a array of nodes is it possible to draw a path around these given nodes? Please see below image

I have been trying to get the lasso to select both circles and lines in my svg graph (they represent nodes and links) but sofar I have failed and it made me wonder whether it was possible at all?

D3 does not have a node dependancy, so why should a plugin for it?

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 ?

When selection drag is over, can I keep the lasso box?

title says it all

hello community,

I got an error caused by svg.call(lasso). I adopted the code from this example.

Thanks in advance

第19行到第31行，此处不应该使用append()来进行添加节点，或者说应该在添加节点之前判断g.lasso,path.drawn,path.loop_close,circle.origin这四个节点是否存在，如果存在的话就不应该在添加。
例如，同时在散点图中使用zoom和lasso，就需要对zoom和lasso进行切换，但是每一次切换lasso就会增加一个节点g

。

Right now I am able to draw one lasso(freehand shape) on svg map.When I tried to draw another lasso , first lasso gone.
I want to keep first as well as second lasso .
How we can do this?

I am receiving this error statement:
Attempted import error: 'lasso' is not exported from 'd3' (imported as 'd3')

I have a react setup and have installed d3-lasso using npm like this:
npm install d3-lasso

What am I missing here?

I have implemented the lasso for scatter plot as shown in the example. I am having a hard time figuring out how to allow the user to also click on a single circle to select it.

Hello

I am working with D3 version 6 and was trying to use your Lasso plugin.
It works perfectly with version 5 but if I try to use V6 its has sourcevent errors. I believe it is the way the new version has event passed in functions.
d3-lasso.js:819 Uncaught TypeError: Cannot read property 'sourceEvent' of undefined
at SVGRectElement.dragmove (d3-lasso.js:819)
at nt.call (d3.min.js:2)
at Object.e [as mouse] (d3.min.js:2)
at p (d3.min.js:2)
at d3.min.js:2
Any help would be appreciated. Will this plugin be upgraded for the latest version?

D3-lasso provided free handshape lasso drawing.
I am able display svg map with d3-lasso and its output also display.
Also able to draw free handshape but want to draw specific rectangle.
How to do it?

Hey skokenes,

I spent some of today fiddling with the new d3v4 + lasso code. I basically made some minor syntax adjustments and it works fluidly on my desktop. No more flickers/ unselected points in lasso!

However, it appears that the lasso (or perhaps just lasso_end) isn't working on mobile. I tested it in chrome on my Android phone, and my friend tested it using safari on her iPhone.
The example in question is: http://bl.ocks.org/skokenes/a85800be6d89c76c1ca98493ae777572

To decribe in better detail what happens:

• on my phone, bl.ocks doesn't load the graph at all
• on her phone, she's able to start and draw the lasso, but after the lasso disappears, the points remain unselected

Sorry to post this so late, I only just started playing with the new code yesterday.
Cheers,

-Ben

currently have bogus test script

I am using d3-lasso with svg map file.
I am able to display output on svg file having large data .
When I tried to draw lasso its taking too much time and application got hanged.

OS:Windows, Linux.