Question

我很喜欢像javascript和d3这样的网络编程。所以也许我的基础知识有点低。 Ich知道用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拖动行为拖动矩形的一个小示例。 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缩放行为平移所有矩形会更好。更新了小提琴网址。

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

1 个答案: