Svg semantic zoom not working on SVG in HTML

Question

So i need little help on my project. I need to do semantic zoom on SVG that is in html part of page. It comes from uploaded therefore, SVG is mostly out of my control. I need to apply pan and zoom on that SVG. I found this example http://bl.ocks.org/mbostock/3680957 and tried to use it. Here is my fiddle (!!fiddle removed, see update bellow!!) and as you can see pretty nothing happens. But in console there is warnind that d is undefined. Could you please find what I got wrong in here?

Thanks guys! :)

Code here:

HTML

Javascript:

var width = 1000,
    height = 500;

var x = d3.scale.linear()
  .domain([0, width])
  .range([0, width]);

var y = d3.scale.linear()
  .domain([0, height])
  .range([height, 0]);

var svg2 = d3.select("#map_cont")
  .select("g")
  .call(d3.behavior.zoom().x(x).y(y).scaleExtent([1, 8]).on("zoom", zoom2));

var circle2 = svg2.selectAll("circle");

function zoom2() {
 console.log(circle2);
 circle2.attr("transform", transform);
}

function transform(d) {
  return "translate(" + x(d[0]) + "," + y(d[1]) + ")";
}

UPDATE

So after a while and thanks to @Kaiido I made some progress. Now I have this http://jsfiddle.net/syj4jhes/8/ As you can see, the x and y coordinates are calucated wrong. Now I'm looking for the help to calculate them correctly... :)

Jack Bizon · Accepted Answer

I solved it! It was hell of using console.log, but I got it working in the 9th version. Hope this helps anyone. Fiddle here http://jsfiddle.net/syj4jhes/9/

Whole trick was that d was array of initial positions of circles. Little bit of mocking and BA DUM TSS! It worked. Code bellow 'cause you never know what can happen.

HTML

Javascript

var width = 1000,
    height = 500;

var x = d3.scale.linear()
    .domain([0, width])
    .range([0, width]);

var y = d3.scale.linear()
    .domain([0, height])
    .range([0, height]);

var svg2 = d3.select("#map_cont")
    .select("g")
    .call(d3.behavior.zoom().x(x).y(y).scaleExtent([0.1, 8]).on("zoom",  zoom2));

var circles = svg2.selectAll("circle")[0];
var circle2 = circles;
var arrayLength = circle2.length;
var orig_pos=[];
for (var i = 0; i < arrayLength; i++) {
    var atribut=$(circle2[i]).attr("transform");
    var xval = atribut.match(/([-0-9.]*),/);
    var yval = atribut.match(/,([-0-9.]*)/); 
    var pos= [ parseFloat(xval[1]),parseFloat(yval[1]) ];
    orig_pos.push(pos);
}

function zoom2() {
  $(circle2).attr("transform", transform);
}

function transform(d) {
    var xval = orig_pos[d][0];
    var yval = orig_pos[d][1];
    return "translate(" + x(xval) + "," + y(yval) + ")";
}

Svg semantic zoom not working on SVG in HTML

Answers (1)

Related Questions