d3 v4 update issues with zoom and pan versus drag

[steve...@talktalk.net]

I have several rectangles with text inside on linear axes.  Previously, I was able to zoom on the x-axis only and maintain a fixed height rectangle .  I have tried the following but it doesn't stop the rectangle increasing on zoom:

gx.call(xAxis.scale(d3.event.transform.rescaleX(x)));

gy.call(yAxis;

gMain.attr("transform", d3.event.transform);

Is there a way in v4 to zoom only the width (x-axis)?

My second issue is that I've added rectangles with text inside a 'g' element and then call zoom on a clear rectangle appended to the svg, like this:

 svg.append("rect")

        .attr("class", "zoom")

        .attr("width", width)

        .attr("height", height)

        .call(d3.zoom()

        .scaleExtent([1, 40])

        .translateExtent([[-100, -100], [width + 90, height + 100]])

        .on("zoom", zoomed));

But now I can't click on a rectangle and drag it.  Is there a way in version 4 to zoom and pan from the space around the rectangles and still have a click function on each rectangle?

See fiddle: https://jsfiddle.net/sjp700/u6rj20jc/2/

[steve...@talktalk.net]

I made some progress with the following but it still increases the rect height on zoom.  Is there a way to apply the scale factor just to the x-axis?

gX.call(xAxis.scale(d3.event.transform.rescaleX(x)));

     

 var kk = d3.event.transform.k;

 var xx = d3.event.transform.x;

  

 gMain.attr("transform", "translate(" + xx + "," + 0 + ") scale(" + kk + ")");

[steve...@talktalk.net]

Final solution:  gMain.attr("transform", "translate(" + xx + "," + 0 + ") scale(" + kk + "," + 1 + ")");

On Saturday, July 23, 2016 at 9:47:02 PM UTC+1, steve...@talktalk.net wrote:

[evan.gi...@velocityapp.com]

Do you still have a fiddle of this? Your solution doesn't seem to work for me. Thank you

[Jan 'oglop' Gazda]

I found the problem that Firefox does not support reading of SVG tags with style,

you can take a look at my pet project here: http://1oglop1.github.io/d3/HTML/circle_force.html

Code here: https://github.com/1oglop1/1oglop1.github.io/blob/master/JS/circle_force.js

S pozdravem / Best regards.

Gazda Jan

--
You received this message because you are subscribed to a topic in the Google Groups "d3-js" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/d3-js/2HGBtsrcsKM/unsubscribe.
To unsubscribe from this group and all its topics, send an email to d3-js+unsubscribe@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.