I am having trouble with D3 zooming as a whole, but the current point I'm stuck at is with the following code snippet :
svg.select("path.line").each(function (d, i) {
d3.select(this).attr('d', function (value) {
return d3lineDraw(d3.select(this).attr('d'));
This code is running in my zoom handler, defined like this
var d3zoomBehavior = d3.behavior.zoom()
//.x(d3xScale) //commented out based on this :
//.y(d3yScale) // uncomment this line to enable zooming on the y axis
//.scaleExtent() //no idea what to put here
.on("zoom", function() {
// limit x zoom
if (d3xScale.domain()[0] < minDate) {
var x = d3zoomBehavior.translate()[0] - d3xScale(minDate) + d3xScale.range()[0];
d3zoomBehavior.translate([x, 0]);
} else if (d3xScale.domain()[1] > maxDate) {
var x = d3zoomBehavior.translate()[0] - d3xScale(maxDate) + d3xScale.range()[1];
d3zoomBehavior.translate([x, 0]);
}
//We have commented out the portion that limits the y zoom, currently only trying to have x axis zoom.
svg.select(".x.axis").call(xAxis);
svg.select(".y.axis").call(yAxis);
Code snippet above goes here.
});
I'm certain we are doing something blatantly wrong somewhere, I have no idea what to put for my extent and I can't figure out where the actual zooming is happening. From what I can tell, the d3lineDraw() function is basically taking in the 'd' attribute of the svg path. But I don't understand how passing an already drawn line back into a line drawing function can create a new zoomed line? I'm not even sure we have our line function correct because I'm pretty sure the first time it runs it's using data to draw the svg path, not an svg path. Here is that d3linedraw function :
var d3lineDraw = d3.svg.line()
.interpolate(config.lineCurveType)
.x(function (d) {
return d3xScale(d.Ticks);
})
.y(function (d) {
return d3yScale(d.Value);
});
Here is d3xScale :
var d3xScale = d3.scale.linear()
.domain([minDate, maxDate])
.rangeRound([0, width]);
I think we are passing the wrong things into the wrong places, but we can't even figure out where to go next because undefined is being passed as attribute_current_value to the function in .attr('attribute', function([attribute_current_value]).
Commented out //.x(d3xScale) based on http://stackoverflow.com/a/29242492/1141764
Aucun commentaire:
Enregistrer un commentaire