Question

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

以下代表代码和结果。

       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/

每个enter（）附加元素的d3调用函数

1 个答案: