Zooming or scaling with d3.js - d3.js

Question

I've created a graph with d3 to show defects on a surface. The surface itself is about 1000 mm wide but could be a few kilometres long. To see the defects more clearly I've implemented d3 zooming, but, sometimes the defects are spread across the x range, so zooming in that far would result in having to scroll from left to right.
Here's a simplified jsFiddle
I could however change the scale to view a specific defect, say one starts at 1000mm and ends at 1500mm I could do:
var yScale = d3.scale.linear()
.domain([1000 - margin, 1500 + margin])
.range([0, pixelHeight]);
But since my defects are rectangles I need to calculate the width with the yScale like this:
.attr("height", function (d) {
return yScale(d.height);
})
Which won't work if I changed the scale's domain (the height could be smaller then the domain value, giving negative values).
So how would I solve this problem? Is there a way to calculate the height of the defect relative to the yScale. Or is there another zooming possibillity?
UPDATE
Following Marks suggestion I implemented it and made a second jsFiddle
The problem I'm facing now is also with the scales. I've tried to fix it a bit but as soon as one uses panning or zooming, the scale functions (xScale and yScale) won't give correct values (mostly negative because it's out of the viewport).
.on('click', function (d) {
d3.selectAll('rect').classed('selected-rect', false);
d3.select(this).classed('selected-rect', true);
var dx = xScale(d.width)*2.2,
dy = yScale(d.height)*2.2,
x = xScale(d.x) ,
y = yScale(d.y) ,
scale = .9 / Math.max(dx / width, dy / pixelHeight),
translate = [pixelWidth / 2 - (scale*1.033) * x,
pixelHeight / 2 - (scale*1.033) * y];
svg.transition()
.duration(750)
.call(zoom.translate(translate).scale(scale).event);
});
So, without panning or zooming and clicking directly, the above code works. Can someone give me a clue on what I did wrong?

Answer 1

Ok i figured it out. You can scale and translate with the zoom function. A good example is the zoom to bounding box example, but that example is based on d3.geo without x and y scaling functions.
With x and y lineair scaled objects you could do this:
.on('click', function (d) {
d3.selectAll('rect').classed('selected-rect', false);
d3.select(this).classed('selected-rect', true);
zoom.translate([0, 0]).scale(1).event;
var dx = xScale(d.width),
dy = yScale(d.height),
x = xScale(d.x) + xScale(d.width/2),
y = yScale(d.y) + yScale(d.height/2),
scale = .85 / Math.max(dx / pixelWidth, dy / pixelHeight),
translate = [pixelWidth / 2 - scale * x,
pixelHeight / 2 - scale * y];
svg.transition()
.duration(750)
.call(zoom.translate(translate).scale(scale).event);
});
First off: you have to reset the translate and scale before doing any xScale and yScale calculations. I just do this by this statement:
zoom.translate([0, 0]).scale(1).event;
dx and dy are the scaled width/height of the objects. To get to the middle of the object, one needs to take the scaled x and y value and add half of the width and height to it. Else it will not center properly ofcourse (i say ofcourse now because i've been fiddling with it).
The scale is calculated by taking the max width or height of the object and devide have 0.85 devided by it to get a little margin around it.
Here's a jsFiddle