d3.js zoom xScale / xAxis

d3.js, zooming

Solution

Well this is how I ended up doing it in case anyone was interested:

function redraw() 
{

    console.log("here", d3.event.translate, d3.event.scale);
    path.attr("transform", "translate(" + d3.event.translate + ")" + " scale(" + d3.event.scale + ")");     

    var xoffset = (xMax + xMin) / 2;
    var yoffset = (yMax + yMin) / 2;

    var xTemp = [(0 - xoffset) * (1/d3.event.scale), (0 + xoffset) * (1/d3.event.scale)];
    var yTemp = [(0 - yoffset) * (1/d3.event.scale), (0 + yoffset) * (1/d3.event.scale)];

    xMin = xTemp[0] + xoffset;
    xMax = xTemp[1] + xoffset;
    yMin = yTemp[0] + yoffset;
    yMax = yTemp[1] + yoffset;

    console.log("", xMin, xMax, yMin, yMax);

    xScale.domain([xMin, xMax]);
    yScale.domain([yMax, yMin]);

    xaxis.call(xAxis);
    yaxis.call(yAxis);

    path.attr("d", line)
        .attr("transform", null)
        .transition()       
        .ease("linear")     
        ;
}

Note that I also had to set the scale limit:

var chart = d3.select("#chart").append("svg")
.attr("class", "chart")
.attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom)
.attr("pointer-events", "all")
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")")
.call(d3.behavior.zoom().scaleExtent([0.2, 5]).on("zoom", redraw))
.append("g");

Problem

I'm trying to create a simple chart that allows zoom capability and the examples that I've found so far generate the axes and ticks manually: http://bl.ocks.org/1182434 What I've used however is the built-in axis object and I don't know how to translate the scale to get this to work - any ideas? ``` var xScale = d3.scale.linear(). domain([0, 80]). // your data minimum and maximum range([0, width]); // the pixels to map to, e.g., the width of the diagram. var yScale = d3.scale.linear(). domain([100, 0]). range([0, height]); var xAxis = d3.svg.axis().orient("bottom").scale(xScale).ticks(10, d3.format(",d")), yAxis = d3.svg.axis().orient("left").scale(yScale); var chart = d3.select("#chart").append("svg") .attr("class", "chart") .attr("width", width + margin.left + margin.right) .attr("height", height + margin.top + margin.bottom) .attr("pointer-events", "all") .append("g") .attr("transform", "translate(" + margin.left + "," + margin.top + ")") .call(d3.behavior.zoom().on("zoom", redraw)) .append("g") chart.append('svg:rect') .attr('width', width) .attr('height', height) .attr('fill', 'white'); // x-axis var xaxis = chart.append("g") .attr("class", "x axis") .attr("transform", "translate(0," + height + ")") .call(xAxis); // y-axis var yaxis = chart.append("g") .attr("class", "y axis") .call(yAxis); // omitted code to draw the path, it's just a path object that uses a line and passes data to it function redraw() { console.log("here", d3.event.translate, d3.event.scale); path.attr("transform", "translate(" + d3.event.translate + ")" + " scale(" + d3.event.scale + ")"); // d3.event.transform(xScale, yScale); // HERE is where I need to figure out how to scale the x and y axes! xAxis.scale(xScale); yAxis.scale(yScale); xaxis.call(xAxis); yaxis.call(yAxis); } ```

Original source