skokenes / d3-lasso-plugin Goto Github PK

What does the targetArea.call() do

I love this plugin and I'm using it extensively now. It's working perfect when using it with a simple scatter plot.

I've not tried to get it working with the Scatterplot Matrix example that can be found here: http://bl.ocks.org/mbostock/4063663

I basically want to replace the brushing with the lasso, but I can't get it to work. Does anyone have any ideas?

Lasso performance is very slow, when if we have more items in d3

I'm trying to use the lasso plugin with radial tree chart ( http://bl.ocks.org/mbostock/4063550 ) but somehow cant make it to work.
I can draw the lasso area and the lasso itself is there but the selection dont work as expected - selecting small area dont select anything, selecting bigger area select all the dots.
Is it possible to tell me where im going wrong?

here is an example of what ive done so far: http://codepen.io/anon/pen/ZbBPxd

Thanks
Stefan

Hi again. I am trying to use your plugin now to select elements inside a map graph. I have assumed from the beginning that the type of graph was not important for the lasso to work. Just by specifying the lassoItems correctly I expected it to work.

So it seems that the lasso gets initialized correctly the lasso items are correctly specified. I am able to see the elements when I check lasso.items(), but the selection is not working properly. When doing a lasso the elements inside it don't get selected. I need to draw the lasso on top of an specific element in order to make it selected. The code still works perfectly when used in scatterplots. Do the lasso.items need to be on the top layer of the svg or that does not matter? Can you think or do you know why this is not working?

I can send you a small code so that you can test this issue if you are willing to. Please let me know.

Thank you for your help again! :)

Hello. I am trying to figure out a way to turn off the lasso applied to an element. For something like zoom, I could write svg.on('.zoom',null), but the same approach applied to lasso does not seem to work. If it matters, I'm trying to make lasso toggleable, so that I can use mousedrag for multiple things in my program.

Thanks!

The title says it all

Ill get an error for close_path_node is not defined and i kinda dont get why, was this a bug in an old version ? or do you have any ideas what can cause this issue ?

Hi,

First of all thanks for this awesome plugin.

I write this in order to say that I would like to have various graphs with a lasso in each one and manage the selections. I have not been able to make this work and I haven't seen any option or mention of this. I am looking at the plugin code now. I am thinking on coding something in order to do this if I see that is not possible. I would appreciate some help or maybe is a very simple issue and you can explain me how to do it.

Thanks!

Thank you for developing this wonderful tool. I am very new to d3 programming.
I am trying to integrate "lasso" into a scatterplot. It works, except that there is a disconnect between where the cursor is pointing/moving and where the visual display of the lasso loop is appearing. The "lasso" is properly obtaining the data points that the cursor loops around, but the "lasso" image appears below and to the right of the cursor. It feels like the offset of the lasso image might reflect the "margins" of the plot area. It feels like I am unintentionally referencing two different coordinate systems. Is there somewhere I should introduce
.attr("transform", "translate(" + xStart() + "," + yEnd() + ")")
to the lasso (outside of the "call" by the "g")?
I apologize if this is not the right place to ask such a question.

Here is how I am defining the "body" of the chart:
function defineBodyClip(svg) {
var padding = 5;
svg.append("defs")
.append("clipPath")
.attr("id", "body-clip")
.append("rect")
.attr("x", 0 - padding)
.attr("y", 0)
.attr("width", quadrantWidth() + 2 * padding)
.attr("height", quadrantHeight());
}

Here is part of the "lasso" definition (pretty much the same as original code):
// Create the area where the lasso event can be triggered
var lasso_area = svg.append("rect")
.attr("width",quadrantWidth())
.attr("height",quadrantHeight())
.style("opacity",0);
// Define the lasso
lasso = d3.lasso()
.closePathDistance(75) // max distance for the lasso loop to be closed
.closePathSelect(true) // can items be selected by closing the path?
.hoverSelect(true) // can items by selected by hovering over them?
.area(lasso_area) // area where the lasso can be started
.on("start",lasso_start) // lasso start function
.on("draw",lasso_draw) // lasso draw function
.on("end",lasso_end); // lasso end function

Here is how a I am calling "lasso" from the "body":
if (!_bodyG)
_bodyG = svg.append("g")
.attr("class", "body")
.attr("transform", "translate("
+ xStart() + ","
+ yEnd() + ")")
.attr("clip-path", "url(#body-clip)")
.call(lasso);

function quadrantWidth() { return _width - _margins.left - _margins.right; }
function quadrantHeight() { return _height - _margins.top - _margins.bottom; }
function xStart() {return _margins.left; }
function yEnd() {return _margins.top; }

D3 brush has a function to attach xscale, yscale function: brush.x().y(). I want to change Lasso's source code to support this function. However, I am not quit sure which line I should change. Is there any easy way to do that? I was trying to just change dragstart(),

d.lassoPoint = {
    cx: x(Math.round(new_box.left-offset_box.left + new_box.width/2)),
    cy: y(Math.round(new_box.top-offset_box.top + new_box.height/2)),
    edges: {top:0,right:0,bottom:0,left:0},
    close_edges: {left: 0, right: 0}
};

but it doesn't work.

I am using D3Js v4 (force layout graphs) and lasso in my project. We are about to move our project into Angular 6. I am finding difficulty in implementing lasso inside Angular. Is there any standard way for this? Can anyone share some sample codes for this?

Hi. Really cool plugin! I was going to write a lasso function for a prototype app for my PhD project. However, I'm inclined to just use yours if you are okay with that.

Are you planning on assigning a license on this code soon?

In your scatterplot example, subsequent selections (after the first) are a little flaky - they dont stop completely, but only occasionally work. Might also be worth keeping the lasso in place until de-selection!

Hey skokenes,

First off, I wanted to say that this is a great widget. As someone with very little d3 knowledge, this gave me a nice entry point.

I did notice, however, that not every lasso selection included all of the points in the selection. It might be a problem specific to non-convex selection areas, but I'm not 100% sure.

Thanks,