d3单独拖动元素&按组

时间:2015-07-12 05:30:37

标签: javascript d3.js

我在组中有几个矩形,我希望它们在拖动外部矩形时在组中移动,但我也应该能够单独移动内部矩形,我可以单独执行此操作,但我无法制作他们同时工作。这是fiddle。谁可以帮我这个事?

var express = require("express");
var app     = express();
var path    = require("path");


app.get('/',function(req,res){
  res.sendFile(path.join(__dirname+'/index.html'));
});

app.listen(3000);



console.log("Running at Port 3000");

1 个答案:

答案 0 :(得分:1)

只需修改sqDrag功能

var sqDrag = d3.behavior.drag().on('drag', function (d) {
    console.log('sqr dragging..');
    var id = d3.select(this).attr('id');
    if (id === null)
        d3.select(this).attr('x', d3.mouse(this)[0]).attr('y',d3.mouse(this)[1]);
    else {
        var parent = d3.select(this);
        var dx = d3.mouse(this)[0] - parent.attr('x');
        var dy = d3.mouse(this)[1] - parent.attr('y');

        parent.attr('x', d3.mouse(this)[0]).attr('y',d3.mouse(this)[1]);

        d3.selectAll("." + id).attr('x', function() {
            return Number(d3.select(this).attr('x')) + dx;
        }).attr('y', function() {
            return Number(d3.select(this).attr('y')) + dy;
        });
    }
});

小提琴 - https://jsfiddle.net/46ag2x2z/