D3js X轴时间超出范围

Question

我做了一个图，其中我的x轴超出了svg元素的范围。 我正在使用对象结构ProgressGraph来保存我的选项（因为另一件事...） 我想将x轴设置为固定大小720x450，但是当我调用缩放或我想要将图形转换为右/左时， X轴将退出svg元素。 X轴的尺寸宽度从720变为920.53，我不知道为什么。这个宽度应该固定为720px。

截图： Good One前变焦/移动好一个侧后变焦/移动 Bad One坏到另一边

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)"); 
}    

Answer 1

Sollution是添加一个SVG元素befero我们为x轴

加“G元素”

 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)");