Question

我用d3绘制了一堆圆圈。我可以轻松地拖动其中一个圆圈并跟踪其cx和cy位置。

 var width= 800;
 var height=600;
 svg= d3.select("body").select(".div1").append("svg")
                            .attr("width", width)
                            .attr("height",height);
 transformed_data =  [
                  [5, 20], [480, 90], [250, 50], [100, 33], [330, 95],
                  [410, 12], [475, 44], [25, 67], [85, 21], [220, 88] 
                ];

 X = [0,800];
 Y = [0,600];

 xScale =d3.scale.linear().domain(X).range([70, width-70]);
 yScale =d3.scale.linear().domain(Y).range([70, height-70]);

 drag = d3.behavior.drag()
          .on("drag", function(d,i) {
                d3.select(this).attr("cx", d3.event.x);
                d3.select(this).attr("cy", d3.event.y);
          })
         .on("dragend",function(d,i){

         });

svg.selectAll('circle')
        .data(transformed_data)
        .enter()
        .append("circle")
        .attr("id", function(d,i){return "id_" + i.toString();})
        .attr("cx", function(d,i){return xScale(transformed_data[i][0]);})
        .attr("cy", function(d,i){return yScale(transformed_data[i][1]);}) 
        .attr("r",10)
        .call(drag);

但是，我不知道如何使用鼠标选择几个圆圈并将它们拖动到一起。有什么想法吗？

如何使用JS拖动几个圆圈？

0 个答案: