D3调用函数为每个进入()追加的元素

Question

我想在使用数据数组绘制的矩形堆栈中添加可拖动点。矩形，文本和点都画得很好，但是当我尝试为每个点调用拖动函数时，只有第一个点受到影响。

下面是代码和结果。

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 1

这不是很清楚你的问题是什么，但如果你想看到线来自各自的圆，只要得到cx和cy的值:

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

这是你的小提琴:https://jsfiddle.net/mzt0qf31/