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/