Semantic Zoom D3.js v3

[Kamil Fedorko]

Hi,

I'm experiencing huge difficulties while trying to do a bounded semantic zoom

Some background first:

The app uses dynamic data from a REST call to display paths & points on a map and they are placed on the map using this function:

                function addEventFlow(data) {

                    addToCountrySummary(data);

                    displayAppInformation(data);

                    var thisnow = now();

                    svg.append("path")

                            .datum({timestamp: thisnow, type: "LineString", coordinates: [[data[12], data[11]], [data[16], data[15]]]})

                            .attr("class", "route")

                            .attr("d", path);

                    var coordinatessrc = projection([data[12], data[11]]);

                    var coordinatesdst = projection([data[16], data[15]]);

                    var circleSrc = svg.append("circle")

                            .datum({timestamp: thisnow})

                            .attr("class", "eventsource")

                            .attr('cx', coordinatessrc[0])

                            .attr('cy', coordinatessrc[1]);

                            

                    var cirlceDst = svg.append("circle")

                            .datum({timestamp: thisnow})

                            .attr("class", "eventdest")

                            .attr('cx', coordinatesdst[0])

                            .attr('cy', coordinatesdst[1]);

                    

                    circleSrc.on("click", function() {

                        $('.eventsource').css('color','blue');

                        console.log('this works');

                    })

And while im zooming in this is the (desired) effect: (Screenshot 1)

Zooming function:

                var zoom = d3.behavior.zoom()

                    .scaleExtent([1, 50])

                    .on("zoom", function() {

                      var e = d3.event,

                          tx = Math.min(0, Math.max(e.translate[0], width - width * e.scale)),

                          ty = Math.min(0, Math.max(e.translate[1], height - height * e.scale));

                      zoom.translate([tx, ty]);

                        for(var i = 0; i < svg[0][0].childNodes.length;i++){

                            if (typeof i !== path || circle){

                            var looper = $(svg[0][0].childNodes[i])

                      looper.attr("transform", [

                        "translate(" + [tx, ty] + ")",

                        "scale(" + e.scale + ")"

                      ].join(" "))}}

                    });

I'm looping as i have multiple elements of the svg and i want all of them to be zoomed in ( if instead i do svg.attr("transform", [ ...  i get a perfect zoom but its way of centre - actually it moves to the right)

I'm quite a beginner at d3.js and it is a big struggle and truly defines error based learning approach.

Please dont hesitate but ask!

[Japhy Bartlett]

It's pretty hard from the description to know what you're asking, let alone how to advise.  Could you put your code in a gist or somewhere public so we can see it in action?

--
You received this message because you are subscribed to the Google Groups "d3-js" group.
To unsubscribe from this group and stop receiving emails from it, send an email to d3-js+unsubscribe@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.