如何拖动可拖动空间上的矩形？

Question

我相对较新的网络编程，如JavaScript和D3。所以也许我的基础知识有点低。我知道在Java，PHP的程序，并有一个非常好的SQL知识。

我的问题是：如何在可拖动的空间上拖动矩形。我尝试编写一个java脚本，在该脚本中，我可以拖动背景（此时所有对象都将移动）以及只有一个选定移动的特定对象。 我也尝试建立d3团体，因为我需要在将来与团队合作。

我会在下面提供我的代码，所以也许你可以帮助我。

var $ = jQuery.noConflict(); 

var width = $(window).width(); 
var height = $(window).height(); 

var workspace_width = 500; 
var workspace_height = 500; 



var zoom = d3.behavior.zoom() 
    .scaleExtent([1, 10]) 
    .on("zoom", function() { 
      background.attr("transform", "translate(" + d3.event.translate + ")scale(" + d3.event.scale + ")"); 
     }); 

var first_zoom = d3.behavior.zoom() 
    .on("zoom", function() { 
      first.attr("transform", "translate(" + d3.event.translate + ")scale(" + d3.event.scale + ")"); 
     }); 

var drag = d3.behavior.drag() 
    .origin(Object) 
    .on("drag", function(d) { 
    d.x = d3.event.x; 
    d.y = d3.event.y; 
    draw(); 
    }); 
// Append SVG to HTML 
var svg = d3.select("body").append("svg") 
    .attr("width", width) 
    .attr("height", height) 
    .call(zoom) 
    .style("pointer-events", "all"); 

//Append Background 
var background = svg.append("g"); 

//Append to Background Stripes from up to down 
background.append("g") 
    .attr("class", "x axis") 
    .selectAll("line") 
    .data(d3.range(0, workspace_width, 10)) 
    .enter().append("line") 
    .attr("x1", function(d) { return d; }) 
    .attr("y1", 0) 
    .attr("x2", function(d) { return d; }) 
    .attr("y2", workspace_height); 

//Append to Background stripes from right to left 
background.append("g") 
    .attr("class", "y axis") 
    .selectAll("line") 
    .data(d3.range(0, workspace_height, 10)) 
    .enter().append("line") 
    .attr("x1", 0) 
    .attr("y1", function(d) { return d; }) 
    .attr("x2", workspace_width) 
    .attr("y2", function(d) { return d; }); 

//Append Foreground to background 
var foreground = background.append("g"); 

//Append rect to foreground 
var first = foreground.append("rect") 
      .attr("x", 5) 
      .attr("y", 5) 
      .attr("width", 100) 
      .attr("height", 60) 
      .attr("rx", 10) 
      .attr("ry", 10) 
      .style("fill", "lightgray") 
      .style("stroke","black") 
      .style("stroke-width","2") 
      .style("opacity","0.7") 
      .call(first_zoom); 

谢谢你的帮助 汉斯

Answer 1

下面是用拖拖D3行为RECT一个小例子。 JSFiddle。希望这可以帮助。

var data = [{ x: 0, y: 0},{ x: 20, y: 20},{ x: 0, y: 60},{ x: 52, y: 0}] 

var zoom = d3.behavior.zoom() 
    .on("zoom",function(){ 
     g.attr("transform","translate(" + d3.event.translate + ")"); 
    }); 

var svg = d3.select("body") 
    .append("svg") 
    .attr("width",window.innerWidth) 
    .attr("height",window.innerHeight) 
    .call(zoom) 

var g = svg.append("g"); 

var drag = d3.behavior.drag() 
    .origin(function(d,i) { return {x:d.x, y:d.y}; }) 
    .on("drag", function(d) { 
     d.x = d3.event.x; 
     d.y = d3.event.y; 
     d3.select(this).attr("transform",function(d){ return "translate("+d.x+","+d.y+")"; });  
     d3.event.sourceEvent.stopImmediatePropagation(); 
    }); 

g.selectAll("rect") 
    .data(data) 
    .enter() 
    .append("rect") 
    .attr("transform",function(d){ return "translate("+d.x+","+d.y+")"; }) 
    .attr("width","30") 
    .attr("height","40") 
    .call(drag); 

更新：我认为，这将使用D3缩放行为进行平所有矩形更好。更新了小提琴URL。