SachDan SachDan - 3 months ago 28
Javascript Question

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);

Answer

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/