SachDan SachDan - 1 year ago 98
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 Source

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/