Hi, could it be possible to drag and rotate element "g"

[ahmet....@gmail.com]

Hi,

I use d3-js library to make a room map with toolbox and drag&drop, rotate functionalities. I use jquery get method to get svg file from server, then add a "<g>" in container in svg.

When I try to drag <g> which contains loaded svg data, I get error "TypeError: l is undefined d3.min.js (line 3, col 16790)"

I think my problem is in load function and the line that appends new <g> item to container. The code is below, could you help me please. (First of all init function runs.)

var mbostockhandler={
    drag:null,
    zoom:null,
    svg:null,
    width:800,
    height:600,
    rect:null,
    container:null,
    zoomed:function() {
        mbostockhandler.container.attr("transform", "translate(" + d3.event.translate + ")scale(" + d3.event.scale + ")");
    },
    mousedown:function(d){   d3.select("g",this.id).call(mbostockhandler.drag); },
    dragstarted:function(d) {
        d3.event.sourceEvent.stopPropagation(); d3.select(this).classed("dragging", true);
    },
    dragged:function(d) {
       d3.select(this).attr("cx", d.x = d3.event.x).attr("cy", d.y = d3.event.y);
    },
    dragended:function(d) {
        d3.select(this).classed("dragging", false);
    },
    zoomed:function() {
        mbostockhandler.container.attr("transform", "translate(" + d3.event.translate + ")scale(" + d3.event.scale + ")");
    },
    init:function(){
        //enable dragging       
        mbostockhandler.drag = d3.behavior.drag()
            .origin(function(d) { return d; })
            .on("dragstart", mbostockhandler.dragstarted)
            .on("drag", mbostockhandler.dragged)
            .on("dragend", mbostockhandler.dragended);
           
        mbostockhandler.zoom = d3.behavior.zoom()
            .scaleExtent([1, 10])
            .on("zoom", mbostockhandler.zoomed);

        //create svg
        mbostockhandler.svg = d3.select("div","svgmaindiv").append("svg")
            .attr("width", mbostockhandler.width + mbostockhandler.margin.left + mbostockhandler.margin.right)
            .attr("height", mbostockhandler.height + mbostockhandler.margin.top + mbostockhandler.margin.bottom)
          .append("g")
            .attr("transform", "translate(" + mbostockhandler.margin.left + "," + mbostockhandler.margin.right + ")")
            .call(mbostockhandler.zoom);
        mbostockhandler.load("toolbox/chair.svg");  //here an svg is loaded
    },
    getRandom:function (min, max) {
        return parseInt(Math.random() * (max - min) + min);
    },
    generateGuid:function (){
          return ""+(new Date()).getTime()+""+mbostockhandler.getRandom(1, 9)+mbostockhandler.getRandom(1, 9)+mbostockhandler.getRandom(1, 9);
    },
    load:function(url){
        $.get(url, null, function(data){
            guid = mbostockhandler.generateGuid();
            var svgNode = $("svg", data);
            $xml = $(svgNode[0]);
            $xml.find('g').attr('id',guid);
            $($xml.find('g')[0]).attr("id","container"+guid);
           
            var newItem = mbostockhandler.container.append("g")
                .attr("id", "_"+guid)
                .call(mbostockhandler.drag)  //this call method
                ;                
            newItem.html($($xml.find('g')[0]).html());
        },
        'xml');
    }
};