Question

我正在使用d3js为移动设备创建图表。图表正在渲染，但我已经修复了使用d3js创建的SVG图表的宽度和高度到960x480。如果我不使用Jquery Mobile，图表可以缩放和滚动，但是在使用Jquery Mobile图表的情况下，图表会被渲染，但它们不可滚动且不可缩放，因此图表会在移动设备上被删除。

有解决方法吗？

  <div data-role="page" data-add-back-btn="true" id="areachart">
        <div data-theme="e" data-position="fixed" data-role="header"  data-id="header">
            <h3>
                Header
            </h3>
        </div>
        <div data-role="content" id="viz">
        </div>
        <div data-theme="e" data-role="footer" data-position="fixed"  data-id="footer">
            <h3>
                Footer
            </h3>
        </div>
        <script>
         var header = localStorage.getItem("chartWizHeader");
         var footer = localStorage.getItem("chartWizFooter");

        $(document).live('pageinit',function(event){



            $('#areachart div[data-role="header"] h3').text(header);
            $('#areachart div[data-role="footer"] h3').text(footer);


            d3.json(sessionStorage.getItem("areaChart"), function(data) {

                d3.select("#viz").html("");

                sessionStorage.removeItem("areaChart");
                // Data is the Final Output.

                $.each(data, function(i, d) {
                  d.Year = +d.Year;
                  d.Sales = +d.Sales;
                  d.Expenses = +d.Expenses;
                });

                //Declare Margin.
                var margin = {top:10,left:50,right:30,bottom:20};

                //Declare height and width of the SVG.
                var height = 500 - margin.bottom - margin.top;
                var width  = 970 - margin.left - margin.right;

                //Define Scaling for x and y
                var x = d3.scale.linear().domain([d3.min(data,function(d){return d.Year}),d3.max(data,function(d){return d.Year})]).range([0,width]);
                var y = d3.scale.linear().domain([0,d3.max(data,function(d){
                        if(d.Sales < d.Expenses){
                            return d.Expenses;
                        }else{
                            return d.Sales;
                        }
                    })]).range([height,0]);

                // Both axis have to be defined.
                var xAxis = d3.svg.axis().orient("bottom").scale(x).ticks(data.length);
                var yAxis = d3.svg.axis().orient("left").scale(y);

                // Create the lines.
                var line1 = d3.svg.line().x(
                        function(d){return x(d.Year);}
                ).y(function(d){return y(d.Sales);});
                var line2 = d3.svg.line().x(function(d){ return x(d.Year);}).y(function(d){return y(d.Expenses);});

                //Create the Area which has starting points.
                var area1 = d3.svg.area().x(line1.x()).y1(line1.y()).y0(y(0));

                var area2 = d3.svg.area().x(line2.x()).y1(line2.y()).y0(y(0));


                //Create the SVG Element.
                var svg = d3.select("#viz").append("svg").datum(data).attr("width",width + margin.left + margin.right).attr("height", height + margin.top + margin.bottom)
                            .append("g").attr("transform","translate("+margin.left+","+margin.top+")");

                //Add path of area.
                svg.append("path").attr("style"," fill: lightsteelblue;fill-opacity: 0.4;").attr("d",area1);

                //Add path of area.
                svg.append("path").attr("style","fill: #00FF00;fill-opacity: 0.4;").attr("d",area2);

                svg.append("g").attr("class","x axis").attr("transform","translate(0,"+height+")").call(xAxis);

                svg.append("g").attr("class","y axis").call(yAxis);

                svg.append("path").attr("style"," fill: none;stroke: steelblue;stroke-width: 1.5px;").attr("d",line1);


                });

        });
    </script>
    </div>

Answer 1

您是否设置了viewport元标记？

<meta name="viewport" content="width=device-width, initial-scale=1">

如果您支持iOS设备，请查看此Zoom fixes: orientation change iOS bug and select/input zoom

使用Jquery Mobile使用固定宽度的d3js创建图表

1 个答案: