繁体   English   中英

D3js X 轴时间 - 超出范围

[英]D3js X AXIS time - out of range

我做了一个图表,其中我的 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)" );
}            

解决方案是添加一个 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)" );

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM