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');
}
};