javascript - d3 为每个 Enter() 附加元素调用函数

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

这是你的 fiddle :https://jsfiddle.net/mzt0qf31/