Javascript D3js X轴时间-超出范围

Javascript D3js X轴时间-超出范围,javascript,d3.js,zooming,scale,Javascript,D3.js,Zooming,Scale,我在svg元素中绘制了一个x轴超出范围的图形。 我正在使用对象结构ProgressGraph保存我的选项(因为其他原因…) 我想将x轴设置为固定大小720x450,但当我调用zoom或我想将图形转换为右/左时,x轴将离开svg元素。x轴尺寸宽度从720变为920.53,我不知道为什么。此宽度应固定为720px 截图: 在缩放/移动到侧面之前,有一个好的 缩放/移动到一侧后的错误 graphParams : { //whole size width : 1050, heig

我在svg元素中绘制了一个x轴超出范围的图形。 我正在使用对象结构ProgressGraph保存我的选项(因为其他原因…) 我想将x轴设置为固定大小720x450,但当我调用zoom或我想将图形转换为右/左时,x轴将离开svg元素。x轴尺寸宽度从720变为920.53,我不知道为什么。此宽度应固定为720px

截图: 在缩放/移动到侧面之前,有一个好的 缩放/移动到一侧后的错误

graphParams : {
    //whole size
    width : 1050,
    height : 600,
    //svg -g
    svg_width: 720,
    svg_height : 450
 }

    x =  d3.time.scale().domain(ProgressGraph.xAxisDomain).range([0,graphParams.svg_width]);

    xAxis = 
            d3.svg.axis()
                .scale(x)
                .orient("bottom")
                .tickSize(-graphParams.svg_height)
                .tickPadding(12)       
                .ticks(12);

     yAxis = 
            d3.svg.axis()
                .scale(y)
                .orient("left")
                .tickSize(-graphParams.svg_width);  

    zoom = 
            d3.behavior.zoom()
                .x(x)
                .scaleExtent([1, 32])
                .on("zoom", zoomed);

    var svg = d3.select("#projectProgress-graph-div").append("svg")
        .attr("width", graphParams.width)
        .attr("height", graphParams.height)
        .append("g")
            .attr("id", "projectProgress-graph-svg")
            .attr("transform", "translate(" + (graphMargin.left) + "," + graphMargin.top + ")")
        .call(zoom);

    svg.append("rect")
        .attr("width", graphParams.svg_width )          
        .attr("height", graphParams.svg_height);   

    svg.append("g")
        .attr("class", "x axis")
        .attr("width",  graphParams..svg_width)
        .attr("transform", "translate(0, " + graphParams.svg_height + ")")
        .call(xAxis)
        .selectAll("text")  
            .attr("dx", "-2em")
            .attr("dy", ".0em")
            .attr("transform", "rotate(-65)" );

    svg.append("g")
        .attr("class", "y axis")
        .call(yAxis);

function zoomed() {
        svg.select(".x.axis").call(xAxis)
            .selectAll("text")  
            .attr("dx", "-2em")
            .attr("dy", "0em")
            .attr("transform", "rotate(-65)" );
}            

解决方案是在为x轴添加“g元素”之前添加svg元素

        svg.append("svg")
        .append("g")
        .attr("class", "x axis")
        .attr("transform", "translate(0 , " + graphParams.svg_height + ")")
            .call(xAxis)
            .selectAll("text")  
                .attr("dx", "-2em")
                .attr("dy", ".0em")
                .attr("transform", "rotate(-65)" );