CODEWITHSUNDEEP
javascriptd3.jssvg
S.Dan
S.Dan

Reputation: 1912

d3 call function for each enter()appended element

I want to add draggable dots to a stack of rectangles drawn using a data array. The rectangles, the texts and the dots were drawn fine but when I try to call the drag function for each dot, only the first dot is affected.

The following represents the code and the result.

JSfiddle

       var dragme = d3.drag()
                    .on("start", function (d) {
                        xx = 0;
                        yy = 0;
                        coordinates = [0, 0];
                        dragdot2 = canvas.append("svg:circle")
                                .attr("cx", function (d) {
                                    return inputstartx + elementwidth;
                                })
                                .attr("cy", function (d, i) {
                                    return inputstarty + (elementheight / 2) + ((elementheight + verticalmargin) * i);
                                })
                                .attr("r", function () {
                                    return elementheight / 4;
                                })
                                .attr("fill", "black");
                        dragline = canvas.append("svg:line")
                                .attr("x1", function (d) {
                                    return inputstartx + elementwidth;
                                })
                                .attr("x2", function (d) {
                                    return inputstartx + elementwidth;
                                })
                                .attr("y1", function (d, i) {
                                    return inputstarty + (elementheight / 2) + ((elementheight + verticalmargin) * i);
                                })
                                .attr("y2", function (d, i) {
                                    return inputstarty + (elementheight / 2) + ((elementheight + verticalmargin) * i);
                                })
                                .style("stroke", "rgb(0,150,150)")
                                .style("stroke-width", "2");
                    })
                    .on("drag", function (d) {
                        coordinates = d3.mouse(this);
                        xx = coordinates[0];
                        yy = coordinates[1];
                        dragline.attr("x2", xx).attr("y2", yy);
                        dragdot2.attr("cx", xx).attr("cy", yy);


                    })
                    .on("end", function (d) {
                        d3.select(".coors").text(xx + "-" + yy);

                    });



            var inputdragdot = inputcontainer.selectAll("circle")
                    .data(inputs)
                    .enter().append("circle")
                    .attr("class", "dragme")
                    .attr("cx", function (d) {
                        return inputstartx + elementwidth;
                    })
                    .attr("cy", function (d, i) {
                        return inputstarty + (elementheight / 2) + ((elementheight + verticalmargin) * i);
                    })
                    .attr("r", function () {
                        return elementheight / 4;
                    })
                    .attr("fill", "black")
                    .call(dragme);

Upvotes: 1

Views: 614

Answers (1)

Gerardo Furtado
Gerardo Furtado

Reputation: 102174

It's not exactly clear what your problem is, but if you want to see the line coming from the respective circle, just get the values of cx and cy:

var thisdragY = d3.select(this).attr("cy");
var thisdragX = d3.select(this).attr("cx");

Here is your fiddle: https://jsfiddle.net/mzt0qf31/

Upvotes: 1

Related Questions