Javascript d3.js散点图未按正确比例缩放

我试图用两组不同的轴绘制散点图。第一组轴应固定在绘图的左侧和底部，可缩放，即传统绘图轴。第二组轴应固定在绘图上，并穿过图形的中心

当图形缩放时，两组轴的缩放速率不相同，这意味着外部轴不能准确反映打印数据的x/y

我有一个JSFIDLE演示当前正在发生的事情

编辑：根据@mgold的建议，从内部轴所属的图层中删除了比例变换。现在，内部轴在缩放时根本不缩放。新小提琴：

代码如下：

var width = 500,
    height = 500,
    margin = {
        top: 0,
        right: 0,
        bottom: 25,
        left: 70
    };

var pointWidth = 2,
    defaultZoom = 1,
    maxWidth = 32768;

var palette = {
      "lightgray": "#819090",
      "gray": "#708284",
      "mediumgray": "#536870",
      "darkgray": "#475B62",

      "darkblue": "#0A2933",
      "darkerblue": "#042029",

      "paleryellow": "#FCF4DC",
      "paleyellow": "#EAE3CB",
      "yellow": "#A57706",

      "orange": "#BD3613",
      "red": "#D11C24",
      "harshRed": "#ff0000",
      "pink": "#C61C6F",
      "harshPink": "#ff6699",
      "purple": "#595AB7",
      "blue": "#2176C7",
      "green": "#259286",
      "yellowgreen": "#738A05"
}, colors = {
    selectedPoint: palette.darkerblue,
    background: palette.mediumgray,
};

//Create scales
var xScale = d3.scale.linear()
    .domain([0, maxWidth])
    .range([-1 * (maxWidth * (pointWidth / 2)), (maxWidth * (pointWidth / 2))]);

var yScale = d3.scale.linear()
    .domain([0, maxWidth])
    .range([-1 * (maxWidth * (pointWidth / 2)), (maxWidth * (pointWidth / 2))]);

var bottomScale = d3.scale.linear()
    .domain([0, maxWidth])
    .range([-1 * (maxWidth * (pointWidth / 2)), (maxWidth * (pointWidth / 2))]);

var leftScale = d3.scale.linear()
    .domain([0, maxWidth])
    .range([-1 * (maxWidth * (pointWidth / 2)), (maxWidth * (pointWidth / 2))]);

// Create Axes
var xAxis = d3.svg.axis()
        .scale(xScale)
        .ticks(640)

var yAxis = d3.svg.axis()
        .scale(yScale)
        .ticks(640)
        .orient('left')

var bottomAxis = d3.svg.axis()
        .scale(bottomScale)
        .ticks(640)
        .tickSize(-height)

var leftAxis = d3.svg.axis()
        .scale(leftScale)
        .ticks(640)
        .tickSize(-width)
        .orient('left')

// Create map
var map = d3.select('#map').append('svg')
        .style('background', colors.background)
        .attr('width', width + margin.left + margin.right)
        .attr('height', height + margin.top + margin.bottom);

function createMap() {

    allPoints = map.append('g')
        .attr('id','allPoints');

    xGuide = allPoints.append('g')
    xAxis(xGuide)
    xGuide.attr('transform', 'translate(' + (width/2 + margin.left) + ', ' + (height/2) + ')')
        .selectAll('path')
            .style({ fill: 'none', stroke: '#000' })
    xGuide.selectAll('line')
        .style({ stroke: '#000' })

    yGuide = allPoints.append('g')
    yAxis(yGuide);
    yGuide.attr('transform', 'translate(' + (width/2 + margin.left) + ', ' + (height/2) + ')')
        .selectAll('path')
            .style({ fill: 'none', stroke: '#000' })
    yGuide.selectAll('line')
        .style({ stroke: '#000' })

    bottomGuide = map.append('g')
    bottomAxis(bottomGuide)
    bottomGuide.attr('class', 'x axis')
    bottomGuide.attr('transform', 'translate(' + (width/2 + margin.left) + ', ' + height + ')')
        .selectAll('path')
            .style({ fill: 'none', stroke: '#000' })
    bottomGuide.selectAll('line')
        .style({ stroke: '#000' })

    leftGuide = map.append('g')
    leftAxis(leftGuide);
    leftGuide.classed('y axis', true)
    leftGuide.attr('transform', 'translate(' + margin.left + ', ' + (height/2) + ')')
        .selectAll('path')
            .style({ fill: 'none', stroke: '#000' })
    leftGuide.selectAll('line')
        .style({ stroke: '#000' })

    applyZoom();
}

function applyZoom() {
    var setZoom = d3.behavior.zoom()
        .scale(1)
        .scaleExtent([0, 10])
        .x(bottomScale)
        .y(leftScale)
        .on('zoom', zoom); 

    d3.select('#map svg').call(setZoom);
}

function zoom() {
    d3.select('#allPoints')
        // .attr('transform', 'translate(' + d3.event.translate.join(',') + ')scale(' + d3.event.scale + ')');
        .attr('transform', 'translate(' + d3.event.translate.join(',') + ')');
    map.select('.x.axis').call(bottomAxis);
    map.select('.y.axis').call(leftAxis);
}
createMap();

---

根据不同的文本大小判断，中心轴是具有比例变换的元素的子元素。您应该尝试删除重复的代码，并创建一个尽可能简单的演示。是的，层次结构是：->svg->g.allPoints with transform translate/scale->center x axis->center y axis->bottom axis->left axis我将尝试删除缩放变换，看看它会如何影响内容我不知道该注释会有多大帮助。。。层次结构是：svg{g.allPoints{innerX，innerY}，outerX，outerY}。我从g.allPoints中删除了缩放变换，但现在，正如预期的那样，该层根本没有缩放，更不用说匹配外部轴的缩放了。我现在就用最新的fiddle更新帖子。我没说去掉刻度。您可能应该从这个示例开始，添加中心轴：