D3js X AXIS 时间 - 超出范围答案

【问题标题】：D3js X AXIS time - out of rangeD3js X AXIS 时间 - 超出范围
【发布时间】：2016-01-04 15:24:48
【问题描述】：

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

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

【问题讨论】：

标签： javascript d3.js zooming scale

【解决方案1】：

解决方案是在我们为 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)" );

【讨论】：