javascript - 将多个对象添加到 svg 并添加拖动行为问题

Question

我对 SVG 和 d3 库完全陌生。我需要向 svg 动态添加 5 个圆圈，其中都包含可拖动的事件处理程序。我已经编写了用于添加单个圆圈并向其添加可拖动行为的代码，并且其工作正常。现在我在 for 循环中尝试同样的事情以添加 5 个圆圈。它显示所有圆圈，但是当我拖动一个特定的圆圈并将其放在某个位置时，它会停留在那里，当我再次触摸另一个圆圈时，旧圆圈会从我们放置的位置消失并出现在我们接下来开始的新圆圈上。请查看下面提到的代码。如有任何帮助，我们将不胜感激。

   function addCircles()
    {    
    var box = d3.select(".box");  

         for(var i = 0;i<5;i++)
         {

            var drag = d3.behavior.drag()  
                 .on('dragstart', function() { console.log("dragstart"); circle.style('fill', 'red'); })
                 .on('drag', function() { console.log("drag X - " + d3.event.x + " Y - " + d3.event.y); circle.attr('cx', d3.event.x)
                                                .attr('cy', d3.event.y); })
                 .on('dragend', function() {    console.log("dragend - " + d3.event.x); 
                                                circle.style('fill', 'green');  }); 

var circle = box.selectAll('.draggableCircle'+i)  
                    .data([{ x: i*15, y: i*15, r: 10 }])
                    .enter()
                    .append('svg:circle')
                    .attr('class', 'draggableCircle'+i)
                    .attr('cx', function(d) { return d.x; })
                    .attr('cy', function(d) { return d.y; })
                    .attr('r', function(d) { return d.r; })
                    .call(drag)
                    .style('fill', 'green');


         } 
    } 

我在 chrome 中调试代码后检查出来，发现没有检测到 dragEnd 的位置。

Answer 1

你的 fiddle 没有用，所以我不得不根据提供的代码制作自己的 fiddle :http://jsfiddle.net/Qh9X5/6932/

先创建数据，然后根据该数据绘制圆圈，而不是一次完成。

var nodeData = [];

     for(var i = 1;i<15;i++) //change the value 15 to however many circles you want
     {      

        nodeData.push({
           x:i*15,
           y:i*15,
           r:10
        })    

     }

然后使用这些数据创建圈子:

 var circle = box.selectAll('.draggableCircle'+i)  
                    //.data([{ x: i*15, y: i*15, r: 10 }])
                    .data(nodeData)
                    .enter()
                    .append('svg:circle')
                    .attr('class', function(d,i){
                    return 'draggableCircle'+i; //changed this to use i in the loop 
                                              //through the nodes not i in the for loop
                    })
                    .attr('cx', function(d) { return d.x; })
                    .attr('cy', function(d) { return d.y; })
                    .attr('r', function(d) { return d.r; })
                    .style('fill', 'green')
                    .call(drag)

您的拖动也没有正确完成。你有这一行:

circle.attr('cx', d3.event.x).attr('cy', d3.event.y);

当您遍历每个圆圈并对所有圆圈进行拖动时，您不希望这样。你只想在你正在“拖动”的元素上调用它，就像这样:

function dragmove(d, i) //-updates the co-ordinates 
{
    d.x += d3.event.dx;
    d.y += d3.event.dy; 


    d3.select(this).attr("transform", function(d,i)
    {
        return "translate(" + [ d.x,d.y ] + ")";
    });    
}

我想这就是我为让它发挥作用所做的所有更改。

附带说明，对于 JSFiddle，您必须在左侧包含 D3 库，否则它将无法工作。此外，在 html 中调用“drawCircles()”函数时，您必须更改 fiddle 的加载，否则它将无法找到该函数。此外，尽管如此，如果您要在问题中再次使用 JSFiddle，请确保它在向 SO 用户发送链接之前有效。

EDIT

我添加了这一行以在加载时获得正确的圆圈位置:

circle.attr("transform", function(d){
          return "translate(" + [ d.x,d.y ] + ")";
          })

现在拖动工作完美:))希望这有帮助