d3.js用固定轴刷和缩放

Question

我有一个d3.js散点图，带有画笔＆amp;缩放功能。我的工作基于类似的example。您可以使用d3-brush缩放到拉丝区域（并使用双击缩小）。

然而，问题是轴与数据成比例，但我需要修复轴。任何想法或指针都将非常感激。

我的代码粘贴在下方和JSFiddle上。

var data = [
  {var1: 1, var2: 2},
  {var1: 2, var2: 3},
  {var1: 3, var2: 3},
  {var1: 4, var2: 4},
];


var margin = {top: 30, right: 30, bottom: 30, left: 30};
var width = 700 - margin.left - margin.right;
var height = 700 - margin.top - margin. bottom;

var vis = d3.select("#main")  // This is where we put our vis
            .append("svg")
            .attr("width", width + margin.left + margin.right)
            .attr("height", height + margin.top + margin.bottom)
            .append("g")
            .attr("transform", "translate(" + margin.left + "," + margin.top + ")");


x0 = [-6, 6],
y0 = [-6, 6]

var xScale = d3.scaleLinear()
               .domain([-6, 6])
               .range([0, width]);

var yScale = d3.scaleLinear()
               .domain([-6, 6])
               .range([height, 0]); // actual length of axis

var xAxis = d3.axisBottom(xScale)
var yAxis = d3.axisLeft(yScale)

var brush = d3.brush().on("end", brushended),
    idleTimeout,
    idleDelay = 350;

vis.selectAll("circle")
   .data(data)
   .enter()
   .append("circle")
   .attr("cx", function(d) {return xScale(d.var1);})
   .attr("cy", function(d) {return yScale(d.var2);})
   .attr("r", 5)
   .attr("fill", "red")


vis.append("g")
   .attr("class", "axis axis--x")
   .attr("transform", "translate(0, " + (height / 2) + ")")
   .call(xAxis);

vis.append("g")
   .attr("class", "axis axis--y") // assign an axis class
   .attr("transform", "translate(" + width / 2 + ", 0)")
   .call(yAxis);

vis.append("g")
   .attr("class", "brush")
   .call(brush);

function brushended() {
    var s = d3.event.selection;
    if (!s) {
        if (!idleTimeout) return idleTimeout = setTimeout(idled, idleDelay);
                xScale.domain(x0);
                yScale.domain(y0)
        } else { 
                xScale.domain([s[0][0], s[1][0]].map(xScale.invert, xScale));
                yScale.domain([s[1][1], s[0][1]].map(yScale.invert, yScale));
                vis.select(".brush").call(brush.move, null);
        }
    zoom();
}

function idled() {
    idleTimeout = null;
}

function zoom() {
    var t = vis.transition().duration(750);
    vis.select(".axis--x").transition(t).call(xAxis);
    vis.select(".axis--y").transition(t).call(yAxis);
    vis.selectAll("circle").transition(t)
       .attr("cx", function (d) { return xScale(d.var1); })
       .attr("cy", function (d) { return yScale(d.var2); });
}