D3js X 軸時間 - 超出范圍

Question

我做了一個圖表，其中我的 x 軸超出了 svg 元素的范圍。 我正在使用對象結構 ProgressGraph 來保存我的選項（因為其他事情......）我想將 x 軸設置為固定大小 720x450，但是當我調用 zoom 或我想將圖形向右/向左轉換時，X -axis 正在離開 svg 元素。 x 軸尺寸寬度從 720 變為 920.53，我不知道為什么。 此寬度應固定為 720 像素。

屏幕截圖：好放大前一張好/移到一邊壞放大/移到一邊后一張壞

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

解決方案是添加一個 svg 元素，然后我們為 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)" );