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

溶剂添加svg元素befero我们添加＆＃34; g元素＆＃34;对于x轴

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

D3js X AXIS时间 - 超出范围

1 个答案: